>Use attribute selectors to convey unicity.

> /* Do */

> [id="main"] { max-width: 80ch; }

> /* Don't */

> #main { Max-width: 80ch; }

I strongly disagree with this kind of guideline. The id attribute has very good uses, and in those cases the hash syntax should be the preferred way.

The use of id in an attribute selector is such a bad choice that makes me question the whole document.

This is a very interesting approach, and the rules and principles are very sensible. It's nice to see something that tries to really use the platform and emphasize semantic HTML.

Of course, as with any convention-based, getting everyone to follow the rules might be difficult, although the stylelint-config helps.

It would be helpful to see an example of the ruleset applied to a large-ish solution. There are a lot of rules, so it's kind of hard to imagine what it would look actually look like in the css.

Could you elaborate a little on what you mean by “just-in-time” rulesets and how rule 22 ("Component styling should only be served with live components.") works in practice? Are you referring to web components?

ECSS also means "European Consortium for Space Standardization". They edit the standards for all fields within space engineering :)

Eh, I dislike Tailwind but this doesn't sound like it will hold water in the long run.

Why the hell does a rule talk about consistent padding and then not use css variable? A class name .card is a sure thing to conflict somewhere. Typography inheritance is another good way how to introduce hard to debug bugs. Global scope css - ewww (use only absolute minimum necessary).

Please use css-in-js, Tailwind, shadow dom or at the bare minimum css modules. Friends and future you will thank you.

But hey, maybe they are building some blog. I live in the apps world.

Also some rules are valid like the one about not using margin on the component itself.

A pre-commit script would be nice and easy entry (at least for me)

Pretty solid approach, been a good read.

CSS performance is underrated as well.