[sbergot]

Not OP but here is my version:

- css is not scoped by default. Predicting the effect of adding a new rule is very hard if you are not using scoping solutions or if you are not constently writing new class names with a strict convention

- because of the first point, css is never refactored in most places. It becomes an ever growing monster of a code base

- css selectors are build to write css that depends on html. A lot of webapp should be writing html that depends on a small set of css rules in order to get a consistent ui

- the initial "semantic html approach" is counter productive for most webapps. This blog post is a very good read about this particular point: https://adamwathan.me/css-utility-classes-and-separation-of-...

[tannhaeuser]

Ah I see you're coming from a webapp developer PoV. In that case, I just wouldn't bother with CSS at all as you've got all the dynamics in your hand anyway to set styles as you please. Except pseudo-classes (even hovers), media queries, transitions/keyframes can't be specified in inline style attributes - just one of the many CSS blunders.

Personally, I'm more interested in HTML as a document format in the original sense. Limited as it is, I just can't fathom the blackout moment where, confronted with a very basic HTML document plus a CSS stylesheet about the same size or more written in a completely different yet redundant syntax, somebody would say "yup, that seems like a reasonable document format for exchanging most of the world's text".

Edit: regarding your scoping requirement, isn't just including the id or class of a component in CSS selectors or, when necessary, sass-like nested CSS rules enough of a scoping mechanism?

[sbergot]

Ids are rarely used in webapp because most people are using a component based approach. By nature they can be instantiated multiple times so you can only use classes.

The basic approach is to only use selectors with a single class name and nothing else. No child selector or anything.

Then you use a naming convention for class names. The most popular is called BEM (for Block/Element/Modifier).

Sass can help you write BEM class names: https://medium.com/@andrew_barnes/bem-and-sass-a-perfect-mat...

You might use other libraries. Those work by generating class names for you and applying those classes at the right place. There is a whole set of possibilities here: css-modules, styled-component, jss, etc. Some of those libraries use a separate file for writing the css rules (like css modules). Some other libraries ask you to write those rules next to your react/angular/whatever component (styled-component/jss). Those are often called css-in-js.

All of this is only useful when you are making a webapp.