What’s up everyone? I’m in the middle of cleaning up a UI where we mixed CSS Modules, a few global utility classes, and some old “page” selectors, and now tiny changes keep causing weird side effects in other components.
If you were starting from this spot, how do you draw the boundary between local component styles and shared globals so you don’t end up with specificity wars and fragile overrides?
I’d stop letting page-level selectors reach into components. That’s usually where the mess starts.
Keep globals boring: design tokens in CSS variables, plus a small set of layout helpers. Stuff like spacing, color, type scale, maybe a flex/grid utility or two. The actual look of a button or card should live inside the component stylesheet.
For variants, make them explicit on the component itself. A variant="danger" prop or a modifier class is way cleaner than some parent selector trying to win a specificity fight from the outside. I’ve seen that turn into “temporary” overrides that stick around for years.
:: Copyright KIRUPA 2024 //--