I don't think CSS is outdated, it was just never that suited for the purpose people are using it for.
It still remains a fantastic way to style a document. The cascading nature of CSS works great in that context. But styling UI components is something quite different.
You accidentally apply a global style, and your entire UI is broken.
You need a different styling inside a specific visual component? You need to fight specificity and override a parent ir a grandparent or a global style.
Those are certainly everyday concerns for people doing UI work, but I'm not sure I see how they're specific criticisms of CSS.
Global is going to mean global, regardless of whatever's managing the appearance, and the only UI systems I can imagine that wouldn't have a problem like this would be those with an entirely uncustomizable global UI presentation.
And for differing stylings inside a specific visual component -- generally, specificity is on your side here, most of the time the selectors involved in component-specific rules will naturally override global styles and you'd only fighting specificity if there's another component specific rule. If that's the case, though, what system would save you from conflicting rules applied to a specific component?
> That's only a concern if your UI elements depend on global styles, right?
No.
div {
padding: 15em;
}
This will affect all of your styles. CSS is a flat global namespace where you fight to style your local components by overriding rules with increasing specificity.
Given the abundance of div elements in modern HTML, a CSS rule to set padding in all of them can only make sense in an unlikely minority of abnormally simple and constrained pages. Setting a huge, fixed 15em padding is also highly suspect.
You need to "fight" only in poorly designed systems; UI elements can pretend to have a hierarchical namespace and avoid all interference with other components, and pages can be designed systematically (e.g. box-sizing border-box vs. content-box, padding vs. margin, flex...) to simplify CSS rules.
Your example affects all div elements which are not styled. If you also include class and/or ID specific definitions then your padding setting doesn't cascade and those are not affected. That's the point of CSS.
> where you fight to style your local components
That's not true. Style changes do cascade but they only cascade where the designer intends them to cascade. If a designer specifies that all div components shall use the same padding then you can't complain that all div components are using the same padding.
> UI toolkits such as Qt use CSS (actually, Qt Style Sheets) to style UIs
This statement makes it sound like every Qt application uses CSS. That's not true. CSS is offered as a way to apply corporate branding to an application. I'm not aware of any FOSS Qt applications using CSS.
> This statement makes it sound like every Qt application uses CSS. That's not true.
The applications that are ok with the default style don't need to specify style. Nevertheless Qt is an UI toolkit that supports CSS styling.
> I'm not aware of any FOSS Qt applications using CSS.
And that's ok. Nevertheless I've already worked on a couple of Qt projects that used Qt Style Sheets extensively. In fact, that's pretty much the norm in any non-desktop project.
That's a design decision by the ReactJS. Some consider this a flaw of ReactJS. Usually all CSS stylesheets are not included globally in all pages.
Also, if you need to apply a different style, you can just include your custom stylesheet after the global or base stylesheet. As long as you use either the same selectors or more specific selectors, you will be able to override the previous styles. This is assuming the previous developer didn't make the bad design decision of using !important which usually can't be overwritten.
It still remains a fantastic way to style a document. The cascading nature of CSS works great in that context. But styling UI components is something quite different.