Great post! I think everyone should adopt BEM or similar naming conventions for CSS. The benefits are real.
I’ve been using BEM for over five years now. Harry Roberts of CSS Wizardry fame sat in at our office at Ubiquiti Networks to audit our styling and overall performance and convinced me it was the way to go. Over the years I riffed off the pattern, particularly the modifiers.
I don’t like scoping modifiers to the block through naming. Modifiers tend to be fairly reusable outside of the block they are in.
Instead of main__text-special I tend to break it up into two classes main__text is—special. Specificity works here for our benefit. The thing to watch out for in BEM is a bunch of duplicate CSS all over the place. There are ways to avoid that through specificity.
I like to think there are no hard and fast rules about BEM. You can play around with it and find what works for you.
Great post! I think everyone should adopt BEM or similar naming conventions for CSS. The benefits are real.
I’ve been using BEM for over five years now. Harry Roberts of CSS Wizardry fame sat in at our office at Ubiquiti Networks to audit our styling and overall performance and convinced me it was the way to go. Over the years I riffed off the pattern, particularly the modifiers.
I don’t like scoping modifiers to the block through naming. Modifiers tend to be fairly reusable outside of the block they are in.
Instead of
main__text-specialI tend to break it up into two classesmain__text is—special. Specificity works here for our benefit. The thing to watch out for in BEM is a bunch of duplicate CSS all over the place. There are ways to avoid that through specificity.I like to think there are no hard and fast rules about BEM. You can play around with it and find what works for you.
Developers do not type much HTML currently. CSS modules is what we use now. And they don't need BEM.
Totally agree with you. BEM is obsolete.
I will probably start using that for modifiers!! Thanks for the tips!