Show HN: ECSS – Simple rules for efficient CSS

Re:Show HN: ECSS – Simple rules for efficient CSS by morbicer on Thursday March 14, 2024 @03:17PM (#39707881)

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.

[ Parent | on HN ]

Re:Show HN: ECSS – Simple rules for efficient CSS by emmacharp on Thursday March 14, 2024 @06:48PM (#39709886)

Thanks for the comment. It reminds me that examples should be more real-like. Hehe. Because, yeah, I would absolutely use a custom property for it. Same with .card, a simple example which in practice may be more precise, yes.

Global scope is for base rules, yes. Rhythm, typography, maybe colors only. Still it's great to be able to style these design layers globally!

I'll adjust the examples to reflect this. Thanks for the lesson!

PS: hard to debug bugs? The inspector shows styles handily for global styles!

[ Parent | on HN ]

Re:Show HN: ECSS – Simple rules for efficient CSS by morbicer on Friday March 15, 2024 @02:09AM (#39712509)

And because of your post I was prodded to learn more about layers, thanks for that!

[ Parent | on HN ]

Re:Show HN: ECSS – Simple rules for efficient CSS by emmacharp on Friday March 15, 2024 @06:34AM (#39714045)

Nice! They're great for establishing a strict scope for rulesets.

[ Parent | on HN ]