8 ms·
I've found that with enough effort and time I could eventually learn any programming concept. The only exception I've encountered in my career is CSS. I'm no m
by mkoubaa 3y ago
I've found that with enough effort and time I could eventually learn any programming concept.
The only exception I've encountered in my career is CSS. I'm no more effective at it than I was when I first tried using it.
- afavour 3y agoI’ve still not gotten to grips with CSS grid, mostly because flexbox does what I want so I end up falling back on it at the first hurdle. But the rest of it is very clear to me these days.
- FireInsight 3y agoMost, even 2D layouts map easily into nested 1D flexbox in my head. I feel like a single dimensional approach to layouts is way easier to wrap my head around and design with.
- nicoburns 3y agoIMO CSS Grid is actually much simpler and better designed than Flexbox. I’d recommend taking a proper look when you get a chance.
- brigadier132 3y agoThey solve different problems.
- ZanyProgrammer 3y agoThis is the kind of HN comment I come for in these kinds of threads. One person saying one thing (CSS Grid is the one thing keeping me sane!) Another person coming in to say the exact opposite.
- brigadier132 3y agoI'll be a little more helpful since I wrote a one liner without really explaining anything... One explanation people like to give is: CSS Grid is for layouts in 2 dimensions, Flexbox is for layouts along one dimension. Which can be confusing because you absolutely can use Grid for layouts along one dimension too. Here is my stupid sounding rule of thumb that I think is more useful: If you want a grid layout use grid, if you want a flexible layout use flexbox. Grid quite literally splits the area into a grid but what if you want to just say "I want these two elements to be as far apart as possible within the container they are in" (ie a navbar, you want the logo on the left about 20 pixels away from the left of the viewpoert and you want the actual navigation to be on the right with the rightmost element 20px away from the right of the viewport). Flexbox is better for that.
- nicoburns 3y agoI do often end up using Flexbox for 1-dimensional layouts, but IMO Grid's fr units are a lot more intuitive than Flexbox's combination of flex-basis/flex-grow/flex-shrink. If CSS added a 1-dimensional layout mode based on these principles then I'd switch to it in a heartbeat. (I'm considering proposing one myself).
- jakear 3y agoWhat bugs me the most is Flex centering absolutely sucks at handling overflow. Have a flex box with content that is supposed to be centered? Great, looks perfect for the first few items. But then try it on a smaller window or with more items and the content overflowing to the left of the border will be entirely inaccessible. Allowing scrolling both ways would have been perfect. Switching to left-aligned when content overflows would be acceptable. But completely prohibiting access to half the content when an overflow occurs? Absolutely asinine. I believe there may be ways to get around this with layers of inner divs and weird `overflow: ` incantations, but that's exactly the kind of bullshit flex was supposed to solve. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items https://developer.mozilla.org/en-US/docs/Web/CSS/align-items. If you need to enable a "safe" mode to prevent data loss, and that isn't supported on any mainstream browsers... you fucked up.
- quietbrain 3y agoCorrect. but grid is simpler to take in on the face. flex needs a bit of understanding.
- hoosieree 3y agoCSS grid feel like someone asked TikTok to design a rectangle and said yes to every suggestion.
- ipaddr 3y agoWhat does this meab?
- shortcake27 3y agoI think they mean it’s a complicated solution for an uncomplicated problem. Grid systems existed long before CSS grid and were dead-easy to understand and use (960, Bootstrap etc). CSS grid, by comparison, is completely unintuitive. Sure, it’s definitely more powerful, but the barrier to entry is way higher.
- hoosieree 3y agoExactly. "Align things to a grid" seems like a simple concept, but CSS grid seemingly has at least 3 ways to place the top-left corner of an element, and it just gets worse from there. I tried it for a simple layout with 3 elements and quickly decided I prefer flexbox, tables, or even floats.
- renegade-otter 3y agoRachel Andrew has a very good 3-part tutorial that helped me actually understand what I am doing: https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/ https://www.smashingmagazine.com/2020/01/understanding-css-g... It will take you from a n00b to a Grid pro in no time.
- quietbrain 3y agoThis is a really surprising take for me, grid is by far the most sane of the layout models in my experience.
- pavlov 3y agoI feel the same way, and I first wrote CSS in 1998 when it was so new that Netscape misinterpreted even the font size property. There are now thousands of properties and their values, and browser engines have gone to heroic lengths to produce mostly consistent results from these often conflicting directives. But I still keep looking up basic things because the API is simultaneously sprawling and inexpressive and context-sensitive. IMO, the core sin of CSS is mixing up three separate concerns: element styling, layout, and compositing. It’s mostly ok for the first. It’s insanely confusing for the second. And it mostly tries to pretend it’s not about the third at all, which leads to weird situations around implicit compositing groups. We ended up here because CSS started as basically a copy of a handful of Microsoft Word dialog boxes (hence “float” etc.) And as soon as we had got the word processing use case barely working, everybody decided they wanted to build dynamic applications with this same engine instead.
- tannhaeuser 3y agoThe core sin 0 of CSS is introducing another item-value syntax to the stack when there are regular markup attributes for that exact purpose already. Then it gets worse by taking this simplistic syntactic device ad absurdum, only to then finally also start introducing expressions (calc(), custom properties, media queries). Really, CSS should've been sealed a long time ago, with a low-level API a la Houdini available for programmatic layout from JS rather than bloating the language to become accidental Turing, when these highly dynamic styling features are useful for JS apps anyway. Anyway, considering its complete lack of mental discipline and basic CompSci, the CSS WG at W3C has no business designing languages IMNSHO.
- brigadier132 3y agoI completely disagree. If CSS were "sealed" it would be absolutely terrible and we'd still be dealing with floats and absolutely positioned elements. The problem with CSS is the weird implicit behavior and edge cases that remain due to compatibility. Computed properties, custom properties and media queries are well designed.
- 3y ago
- _a_a_a_ 3y agoTry XSLT. The only programming language that ever defeated me and I've used quite a few including Haskell.
- gmac 3y agoI found XSLT kind of mind-bending, but also extremely satisfying and quite productive. Like SQL, it’s declarative, so you have to get into the mindset of telling the computer what you want, not what to do.
- _a_a_a_ 3y agoYou may be a smarter person than me, but I couldn't handle it and quite possibly that was partly related to its truly appalling XML-based syntax. I'd like to point out that no other language I'm aware of is so syntacticallyvile that they have to add a new mechanism just to pass parameters around – parameter tunnelling. https://www.w3.org/TR/xslt20/#tunnel-params https://www.w3.org/TR/xslt20/#tunnel-params
- aidos 3y agoOh Lord. You’ve just triggered a horrific memory of how in my first job we used XSLT to convert xml files of job applications into sql that was then executed to import them into the db. That truly was mind bending.
- throw_m239339 3y agoXSLT is a functional language. I say writing DTD and stuff like that is harder than XSLT. XSLT is actually pretty fun to write.
- mkoubaa 3y agoIf I have a reason to I will. Im generally not motivated to learn things to pad my ego, I need a more tangible reason.
- draw_down 3y ago[dead]
- MildRant 3y agoCSS is a lot like Regex to me. I learn enough to do what I need to do then immediately forget everything.
- eutropia 3y agoif css made as much sense as regex I might actually enjoy front end work - there’s no underlying mathematical theory that explains css
- never_inline 3y agoUsually it's not the Automata theory parts of Regex that people find hard. It's the syntax.
- gochi 3y agoUnderstand the Box Model and you'll understand all of CSS.
- tremon 3y agoHogwash. Where in the box model are the precedence rules for selectors defined? How does the box model help with page layout and positioning? Animation? Transformations? Pagination? Sure, the box model is a prerequisite to understand CSS properly. But if you think the box model covers all aspects, you really don't know very much about CSS.
- nicoburns 3y ago> there’s no underlying mathematical theory that explains css There's a well-defined algorithm (well, set of algorithms) that explain it, which you can learn if you so choose.
- millerm 3y agoCSS seems like it was “designed” by several teams in an “agile” environment with no plan and simply didn’t consult the people that would actually be using it.
- moltar 3y agoIt’s because CSS is a constantly moving target of massive conceptual differences from the last one. Plus all the tooling changes frequently as well.
- gardenhedge 3y agoI'm the same. I just use ChatGPT to fix my layouts now.
- mkoubaa 3y agoColleagues have suggested the same. My strategy has been to try to avoid frontend and when I must do it I make sure everyone involved understands my limitations.
- fendy3002 3y agoBecause most css without context are useless. A div with width 100% may not stretch depending on it's content and parent css. It's even worse on positioning, margin and responsiveness. Which is why if you don't interact with it day to day basis, you'll need some trial and error, as well as references and examples. Opposite to backend or usual programming where `foo = foo + 1` is most of the time do an increment by one (exception apply)
- dmix 3y agoThere's a lot of unpredictable stuff too. I was trying to change the border color of a checkbox to match a framework being used elsewhere and for the life of me couldn't figure out why neither setting outline or border changed it. But on the framework's website demo it was doing it just fine. Combing through the CSS and the computed styles panel in dev tools gave me nothing. It turned out there is an option to disable the standard OS form theming which isn't communicated at all in dev tools for that element (and I hadn't seen --webkit-apperance used before as the guide says you really shouldn't mess with it): https://developer.mozilla.org/en-US/docs/Web/CSS/appearance https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
- aidos 3y agoWeeeeeeeell a div is 100% width by default. It will always fill the width of the parent container unless you explicitly change the width.
- renegade-otter 3y agoI only do UI for business-facing apps and my own projects. CSS Grid massively improved my frustration with CSS. It makes it much easier to reason about how your page layout works. I will never ever do another layout without it, stuck together by glue, snot, and magical trial-and-error.
- mundiff 3y agoIt's one of those things that frameworks had been doing since (before?) 960gs. A Grid really needed to be incorporated into CSS and I'm happy to use it or flexbox for layout purposes depending on my use case.
- dmix 3y agoThe "fun" part of being a frontend dev who naturally gets pushed into fullstack as part of the realities of the job is I have to keep on top of developments in CSS, UI frameworks, Typescript, Vue, testing frameworks, Ruby, Rails, etc. Not to mention the build tooling (Vite/webpack) and deployment / operating system stuff. Fortunately the database stuff rarely changes with Postgres. I wish I could specialize on any one of these sometimes...but such is life at a startup. It's more interesting being able to do them all anyway and be able to build entire apps yourself. Just occasionally frustrating.
- madeofpalk 3y agoIs there another layout language/engine that you've found more intuitive and flexible?
- mkoubaa 3y agoAfter a couple hours of using xaml I felt like I learned something. But I didn't spend more time on it.
- madeofpalk 3y agoI've developed apps using XAML for a considerable amount of hours. XAML is significantly more restrictive than CSS. Windows UI toolkits will give you a bunch of pretty high level components, but the primitives for build anything else are extremely poor. It lacks something like flexbox or grid. Last time I investigated having a uniform grid of items is impossible without falling back to custom C# layout code.
- gravitronic 3y agoI was like you until about a year or two ago, and then set out to learn it enough to implement a site layout without having to resort to copy and pasting things I don't understand. It wasn't that hard, once you accept that it'll require it's own study and practice. I put in maybe 20 hours dedicated study and got a lot better out of it. I did a few video courses on LinkedIn Learning (formerly Lynda.com) through my public library. I did a general CSS course and a flexbox CSS course. Then I set out to design pages I needed without pulling some random blog theme and calling it a day. I've gotten a bit better at design as well, although it is a much intrinsic field than CSS and requires a lot more study. The biggest difference was once I treated the design stage with respect as its own discipline and started designing in a design tool (figma) instead of "doing it live" by trying to tweak the design in code as I went. It made me 100% focused in that stage at the design problems and the feedback loop got a lot tighter compared to editing and running code to see how it looked.
- mkoubaa 3y agoI admire your dedication. In my case I saw no improvement when I tried to learn it
- DHPersonal 3y agoI really benefit from reading comments like this, so I appreciate your honesty. I didn't start learning JavaScript until very recently, even though I was making my own personal websites back when Angelfire, Geocities, and Tripod were still a thing. Instead, I focused on the frontend HTML/CSS combo, constantly learning and implementing new CSS technologies whenever I had an excuse to try them out. Because of that specialization, CSS feels understandable to me. My insecurities about my own abilities often present themselves as a belief that investing time in CSS was the growth of a cheap and relatively useless skill for a web development team. Whenever I see that someone who likely knows incredibly more about JavaScript and other programming languages — things that I feel are far harder to understand than CSS — share about how either HTML or CSS is difficult to use, I feel a little more confident that I do bring some value to the team with whom I work at the office.
- zagrebian 3y agoHow often do you read the CSS specs?
- mkoubaa 3y agoFrom start to finish, never. When I had a problem I googled what to do and read the specs of the suggestions that I saw to try to make sense of them. Usually they were not helpful.
- crosen99 3y agoSame here. I think it's because you typically conquer a language by developing a fairly complete mental model of that language's behavior, but with CSS there are just too many nooks and crannies to get your had around. While it's uncomfortable for me, I find that I do best with CSS when I take a more practical approach and just try to use best practices to accomplish what I want without having the deep understanding that I crave. I've found that Kevin Powell [1] is a great resource for this approach, and he also helps with the model model aspect as a bonus. [1] https://www.kevinpowell.co/ https://www.kevinpowell.co/
- ripley12 3y agoI found that Tailwind helped me get more comfortable with CSS. If you put the mechanics of using classes aside, it’s essentially just a well-curated subset of CSS with great documentation. Way more approachable than the sprawl of CSS itself.
- programmerbyd7y 3y agoWhat options exist today for making CSS easier? (It's been a long time since I've done front-end work) Seems like there would be some sort of layer on top of it that someone built that makes things more consistent and then will compile down to the inconsistencies and odd behaviours for how CSS is supposed to be implemented.
- FireInsight 3y agoThere's supersets and siblings like scss, sass, less, there's different modes entirely like utility classes (Tailwind) and css-in-js. I don't think any of those make CSS much easier, though. Quicker to use, easier to write certain things, sure. But you still need to know your way around CSS atleast somewhat before you jump in to some augmentation or replacement.
- code_runner 3y agoThe secret for me was working with something like tailwind etc and in a componentized framework. the framework part isn’t mandatory, but I suppose very small tweaks with something like tailwind do the trick for me. I can’t work with css if there are massive classes and nested stuff etc. I guess composition over inheritance
- manojlds 3y agoTry tailwind. It can help you get better at CSS itself.