Structuring CSS/SASS is a huge pain point for me.
On one hand, I hate the "class soup" and tricky customization that can come with big frameworks like Bootstrap/Foundation. I'd use @extend to solve the class soup, but that of course leads to a lot of CSS bloat.
On the other hand, I hate how challenging it is to stay DRY when sticking to semantic classes and conventions like BEM/ITCSS. I feel like it requires a lot of discipline to keep all aspects of the UI in line with one another and consistent. It's all too tempting to treat every element like a special, unique snowflake at first, only to realize later on it really should have shared styles with something else.
And yet on the occasion when I produce a super modular set of BEM styles with a bunch of reusable components ("button", "navigation", "card", "hero section"), it looks and feels so much like a CSS framework that I wonder if maybe I should've just used one in the first place!
So DN, how do you approach this huge and highly subjective issue?
- Do you use a framework for every project? If so, do you strive to keep your HTML classes semantic, or do you find it just doesn't matter? Do frameworks speed things up for you, even when you customize them heavily?
- In a world where flex is finally usable for most projects, are you still using a grid system? Which one?
- What's your sizing unit of choice? How frequently do use EMs? Do you find their inheritance-based nature useful or do you find it just leads to different components getting out of "EM sync"?
- Is BEM to be the best way forward in terms of CSS naming conventions? How do you reconcile creating a BEM project when also relying on non-BEM dependencies like Bootstrap?