[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.