DEV Community

Discussion on: The only way to improve your CSS gameπŸ‘©πŸΎβ€πŸŽ¨

Collapse
 
leob profile image
leob

CSS is a vast and complicated subject, and part of the difficulty (I think) for developers/coders is that it isn't really programming, on the contrary, it's declarative. It works fundamentally different than a programming language. You write declarations and then "stuff happens". Sometimes it's what you intend to happen, often it's something else.

Another 'problem' with CSS is that it has a long history and as a result it has a multitude of ways to achieve (more or less) the same result. That can make it really confusing.

If I want to make a layout, do I use float, flexbox, CSS grid? Some features are now more or less deprecated or outdated (and not encouraged anymore), other things are so new that they're not properly supported in all browsers. Old features are never removed but new ones continuously added, which makes CSS grow bigger and bigger.

All in all this means it's a vast and complex subject.

Some things are simple and easy to learn (setting foreground and background colors, but even there you run into complexities and subtleties), other things are hard.

THE most difficult aspect of CSS, by far, in my opinion, is layout.

Somewhat embarrassingly, after all these years I still have trouble remembering how to get my 2 DIVs stacked on top of each other, or next to each other! Other example: you want to position an element "absolutely" relative to another element, you then have to make the parent "postion: relative" and the child "position: absolute". How intuitive is that? Not really intuitive, unless you have a firm grasp of what's going on "under the hood".

The way to make it simpler and more straightforward (I think) is to emphasize the more modern parts of CSS like flexbox, and to learn those first, and leave the more arcane 'legacy' features for later (maybe don't learn them at all if you don't need them). The more modern parts of CSS are generally better designed and more easily comprehensible. This makes learning CSS much less confusing.