Comment by onion2k
2 years ago
This is interesting because my first reaction was to recoil in horror at the idea of CSS without the cascade, but my second reaction was to realie you're actually describing approximately how Tailwind works eg small classes that you can use to apply an aspect of styling to a specific element, and use to build up to a design. Utility classes would be the obvious choice if you couldn't rely on the cascade any more.
Tailwind styles still cascade but in a far more manageable and override-able way. Perhaps you're on to something.
Which is better or correct is a question of basically how do you organize code. It's not irrelevant, but at the core should've been how to style content in a way that people actually want to style content. Instead a lot of time was spent on making up rules about cascading and specificity, which the vast majority of developers don't truly know. I knew them 15 years ago well, and realized also in horror as I wrote that I don't really know them so well. And turns out it's not so important. CSS gave us a bunch of primitive things to do, and we were supposed to figure it out, but the primitive things were not that well designed either. It was always a bunch of trickery, but at least the separation of concerns was taken care of.
Usually one does not need to know all the rules of specificity in a project with sane style sheets. Often it is enough to know what styling applies to a parent element and then make the selector more specific by addressing the child element, or if element at the same level, make the selector more specific by adding more detail to where that element is located in the DOM to the selector. Then one automatically has something more specific.
In other cases one can look up how it values id selector for example, or watch the immediate result in the browser, as one adds such a selector.
I am guessing, that over time people, who deal a lot with CSS, will learn the specificity rules automatically.