3 ms·

What are CSS best practices for not feeling lost at sea in a single linear list of styles? Should I group by behaviour type — put all the margins and padding i

What are CSS best practices for not feeling lost at sea in a single linear list of styles? Should I group by behaviour type — put all the margins and padding in one place, all the font stuff in another? How does that jive with grouping in a different dimension: by element hierarchy. All the buttons stuff in one file. All the headings stuff in another. This feels a very basic question so I hope someone will take pity on me and answer the question I was trying to ask. > I published a book about debugging CSS …and it looks amazing. From the sample chapters it’s clear the author knows their stuff. I wonder if they have considered creating a Python (or Clippy!) style linter for CSS that automatically offers advice?

alwillis 4y ago
> Should I group by behaviour type — put all the margins and padding in one place, all the font stuff in another? How does that jive with grouping in a different dimension: by element hierarchy. All the buttons stuff in one file. All the headings stuff in another. I've been where you are. All I can say is Inverted Triangle CSS (ITCSS) [1] solves the issues you're talking about. It's so obvious once you get it—it's one of those "why didn't I think of this" kind of thing. You write your code in specificity order. It sounds odd at first but it makes total sense and eliminates so many of the "issues" people complain about. It makes the cascade your friend and not your foe. [1]: https://blog.codeminer42.com/how-to-organize-your-styles-with-itcss-3787cbc6dcbf https://blog.codeminer42.com/how-to-organize-your-styles-wit...