[vancroft]

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?

[emmacharp]

I'm working on refactoring some sites in ECSS right now. I can report back when done if you care enough! As of now, you can look into the ecss.info CSS on github if you want a taste. Not large-ish, but still representative I'd say.

https://github.com/efficientcss/ecss.info

As for the "just-in-time" CSS, I include the link tag directly in the component itself. Could be Web component or any other type. Yes, the link tag is repeated, but the browser does not download/interpret the file again since it's cached. Been experimenting with this in the past year and I only see advantages.

First, there's a lot less unused CSS in any page (for instance, on Tailwind's front page there is something like 80% unused CSS as per Google coverage tool).

Second, you have a live link to the CSS in your component file (I use Vim but I know VS Code can follow sources too).