I do continue to find it weird how CSS is just relegated to this second class citizen when it comes to web development and huge numbers of folks seemingly have little to no interest in learning it beyond what they can copy and paste.
For me a big part is that global CSS doesn’t match component based web applications as well. Coordinating global class names becomes a pain quickly. Then you move to scoped CSS and suddenly CSS doesn’t add much anymore.
Better not to think of it as global variables and more like annotations for cross-cutting concerns.
That said, don't blame CSS just because React treated it like a second class citizen. Try Svelte. Matches the components there perfectly. It really is amazing to use a web framework that doesn't hate the platform it's written for.
As more web development (in JavaScript) moves away from anything resembling inheritance, the cascade in CSS starts to feel annoyingly out of place. It’s perhaps subtle but a noteworthy distinction in my mind.
I struggled with letting go of old school CSS for this reason. I’ve written it for literal decades at this point and know it like the back of my hand, and it increasingly just feels like the odd man out in the front end stack.
> As more web development (in JavaScript) moves away from anything resembling inheritance, the cascade in CSS starts to feel annoyingly out of place.
I am puzzled by this statement. The cascade is the algorithm for resolving conflicts when multiple rules apply to the same HTML element (based on css rule position, specificity, origin, and importance). Inheritance in CSS is a different topic, where a subset of properties defined on the parent are automatically applied to the children. Without inheritance, you would have to redefine the same properties on each of the children (e.g. the body font-size, or font-family, or color would have to be repeated on each of the children elements). Without cascade, the browser wouldn't know how to resolve conflicting rules. How is any of this out of place?
Yes, both the cascade and (CSS) inheritance are valuable and necessary.
Not the commenter you responded to, but I'm guessing they meant "inheritance" as a programming practise, not the CSS-specific meaning.
Inheritance of CSS rules down the DOM tree is indeed essential for CSS to work, even if you are using some sort of scoping.
Scoping is about limiting the DOM subtree that a CSS rule applies to, so sure it is related to CSS rule inheritance.
But even if you use tailwind, (Vue) scoped styles or styled components, you still need CSS inheritance.
Nobody aims to apply CSS per-element only, although large parts of it are exactly that.
In other words, Tailwind authors stil expect "text-red-500" to be inherited down to child elements.
so much for inheritance, regarding the cascade:
Point of maintable CSS is to keep the cascade flat and avoid multiple levels of overrides or very specific selectors.
Often when non-web based UI frameworks leave out CSS they don't elegantly fold it into their UI markup and/or language, they just don't have the features CSS has to begin with, or force you to declare it in the programming language which imo often looks ugly (especially if they try and make some kind of declarative DSL in an imperative programming language).
> <H1><FONT COLOR=red>...</FONT></H1> …every single goddamn time.
is in fashion again! Only now it’s called class="text-red-500" :o)