Re:Show HN: ECSS – Simple rules for efficient CSS
by emmacharp on Friday March 15, 2024 @06:26AM
(#39713995)
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).
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?