[tannhaeuser]

Care to explain your issues with CSS in detail? I agree it's Stockholm's, but just never can't even begin to state all the things that are wrong with it without sinking into Tech Tourette (ok for me the original sin is that it started by redundantly defining properties and syntax when we had this already in the form of HTML attributes; in which world did that ever make sense?)

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