3 ms·
If you're looking to improve the CSS you end up writing - I highly suggest considering BEM [0]. It stands for block, element, modifier and defines a fairly rigi
by nmjohn 11y ago
If you're looking to improve the CSS you end up writing - I highly suggest considering BEM [0]. It stands for block, element, modifier and defines a fairly rigid structure to build components with.
tl;dr: It promotes extremely simple, component based/modular css that is _trivial_ to refactor with confidence unexpected regressions won't pop up.
I'm primarily a backend engineer, but I do full-stack work, especially in my free time, and after seeing it used by our front-end devs at work I decided to try it on my own project - and for the first time ever, I felt like the CSS I was writing actually made logical sense in the same way any program I'd write makes logical sense. Adding constraints is majorly helpful when your language has hundreds of virtually equivalent ways (or at least seemingly equivalent) of doing the same thing - it's just setting yourself up for confusion later.
With or without any sort of preprocessor, BEM is still crazy beneficial if you have a codebase with many people touching the styles, it -
a.) promotes good css practices by limiting the usage of entirely un-necessary slow css selectors because they'd require convention to be broken (and then caught easily in a code review)
b.) promotes extremely DRY components
c.) defines a very simple yet specific way of handling style variations that make DRY component variants (eg a button component could have a red, green or blue modifier) obvious to everyone on the team in a way almost analogous to a primitive in a programming language -- most codebases don't otherwise have a defined pattern for this leading a lot of wheel reinvention and extra complexity which in turns breeds more complexity, leading to truly disgusting css.
Of course there are downsides, by putting limits on a language some things will necessarily become more difficult/complex to accomplish, but I personally find the benefits far outweigh this.
Additionally, I'm not sure how it works trying to integrate it into a mature codebase - I could see that being a challenge for some projects/CSS code styles, but I've not done that so can't speak from more than speculation.
[0]: https://css-tricks.com/bem-101/ https://css-tricks.com/bem-101/