DEV Community

What is BEM and why use it to name your HTML classes!

Pachi 🥑 on May 07, 2020

Good day! Today I will be talking about one of the tools I use on my web development projects that makes me code prettier and my life easier: BEM! ...

Read full post

Omar Bourhaouta • May 7 '20

A great post 👍
I had a good time using BEM myself, but over time I changed the way I write classnames from .main__text-special to .main-text--special because of the text selection shortcuts and then I started to split the modifier from the classname to keep the JavaScript conditions as clean as possible:

and that's only for my personal projects to keep the consistency with the team.

Pachi 🥑 • May 8 '20

Thank you! And that is a interesting approach.
It is nice how you can adapt BEM to your needs

Stephen Belovarich • May 8 '20 • Edited

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.

Pachi 🥑 • May 10 '20

I will probably start using that for modifiers!! Thanks for the tips!

Mikhail • May 12 '20

Developers do not type much HTML currently. CSS modules is what we use now. And they don't need BEM.

Mikhail • Dec 9 '20

Totally agree with you. BEM is obsolete.

JelilFaisalAbudu • May 12 '20

Hi Pati, thanks for this concise explanation about the BEM thing. I tried to understand the concept using many tutorials but lost interest. Now you have awakened my interest again. But I have one question you. Just in case I want to incorporate the BEM convention into CSS preprocessor like SASS, how appropriate can that be?

Pachi 🥑 • May 12 '20

Hi there, I am glad to read that you found my explanation concise and it got your interest :)
Honestly, I do not used CSS preprocessors so I can't answer you. But I will do some research!

JelilFaisalAbudu • May 13 '20

Thanks Pati. I like your sincerity.

Irina Kats • Jan 13

Works totally fine with SASS, I am using it this way all the time.

Dan Jones • May 13 '20

I've seen this many times before, and still don't understand why this is at all useful.

If I want to target the hero__img img, I'd have to select it with .hero__img. But I could leave out the class, and target it with .hero img as well. Or even .hero > img for higher specificity.

And the modifiers make less sense to me.

If I mark the second div like this:

<div class="main">
    <h1 class="title">
    <p class="text"></p> 
    <p class="text special"></p>  
    <p class="text"></p>
</div>

Then I can select all three ps with just .main .text, and then add in additional styles for special by selecting .main .text.special.

But with this way, if I want common styles between all three p tags, I have to select .main__text, .main__text-special, and then a second one for .main__text-special. This seems a lot less efficient, and completely goes against the intended design of CSS selectors.

Dani Amsalem • May 22 '20 • Edited

The reason BEM is great is because CSS is read right to left by your browser. Check out this two paragraph article css-tricks.com/why-browsers-read-s...

I also was struggling trying to understand why BEM, but understanding the right-left concept helped. Essentially, all elements are given a class and because they are specific to that item or type of item, your browser doesn't have to do as much work to apply styles.

In addition, I use the SCSS preprocessor and BEM is a-mazing when the two are combined.

Instead of repeating my selectors like this:

.main {}
.main__title {}
.main__text {}
.main__text-special {}

I can nest them using the ampersand selector:

.main {
  &__title {}
  &__text {}
  &__text-special {}
}

If you want some more detailed breakdowns of BEM, I suggest checking out Kevin Powell's YouTube video explaining it youtube.com/watch?v=SLjHSVwXYq4

mihai • May 8 '20

seems easy enought, also i read that its used a lot with sass/less, makes it easier to undestand

Slava Borodulin • May 9 '20

it seems easy. but not easy, less/sass does not make it easy, because of constructions like this:

.settings-title {
  &--main {

  }

  &-with-icon {

  }

  &__active {

  }
}

Break search class in the whole project like settings-title--with-icon. You should extra time to figure out where this class is located

AckmanDESU • May 16 '20

I have one file per class / component so searching was never hard.

Pachi 🥑 • May 10 '20

It is super simple and helps me a lot!

Pankaj Sharma • May 8 '20

Wow, never heard about it before, glad you posted it. I may start using BEM soon, thank you :)

Pachi 🥑 • May 10 '20

Thank for for reading :)

Denys Shabelnyk • May 8 '20

Useful post.Thanks

Pachi 🥑 • May 8 '20

Thank you for reading!

jamescalviniv • May 12 '20

A co worker of mine turned me on to BEM a few years back and I've been hooked on it ever since. Thanks for sharing!

Pachi 🥑 • May 12 '20

Glad to hear that!
And thanks for reading <3

Ben Mitchinson • May 12 '20

Great post thank you!
small edit: "rettier and my like easier: BEM!" -> Did you mean life?

Thanks again for the write up

Pachi 🥑 • May 12 '20

Yes, I meant like lol
Thank you, will fix that

polemius • May 11 '20

Very good post!👌❤️💯
I am using BEM in every project and I really like it.

Pachi 🥑 • May 11 '20

Thank you !!!
BEM is really nice glad you like it :)

Slava Borodulin • May 8 '20 • Edited

Why BEM when we have CSS modules? Modern frontend grownup in way Less CSS more clean code

Slava Borodulin • May 9 '20

BEM was cool but after CSS modules appear it dead. Migration from BEM to CSS modules is the best thing that can happen with the project.

Slava Borodulin • May 9 '20

Using BEM in clean way is very tedious. You should manage a huge number of classes per each compnent: element class, modificators classes, classes from block determine positon current element as a child. And this mess grown up with some extra logic. React example:

<h5 className=={classnames(
  "settings-title",
  "settings-title--main",
  "settings-title--with-icon",
  {
    "settings-title--fillied": isSettingsFilled
  }
  "video-settings__title",
  className,
)}>
  Video Settings
</h5>

There is no way to use BEM without extra tools like