A list of CSS authoring rules with examples and a Stylelint config accessible from the top of the page.<p>I've come to these through 20 years of experience and a willingness to make vanilla CSS a better alternative to frameworks.<p>I encourage you all to comment on the rules themselves and the Stylelint Config for ECSS. Here's the link for faster access (I still suggest at least zipping through the rules beforehand).<p><a href="https://www.npmjs.com/package/@efficientcss/stylelint-config-ecss" rel="nofollow">https://www.npmjs.com/package/@efficientcss/stylelint-config...</a>
>Use attribute selectors to convey unicity.<p>> /* Do */<p>> [id="main"] { max-width: 80ch; }<p>> /* Don't */<p>> #main { Max-width: 80ch; }<p>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.<p>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.<p>Of course, as with any convention-based, getting everyone to follow the rules might be difficult, although the stylelint-config helps.<p>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.<p>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?
Eh, I dislike Tailwind but this doesn't sound like it will hold water in the long run.<p>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).<p>Please use css-in-js, Tailwind, shadow dom or at the bare minimum css modules. Friends and future you will thank you.<p>But hey, maybe they are building some blog. I live in the apps world.<p>Also some rules are valid like the one about not using margin on the component itself.