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

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!

What is BEM?

BEM (Block, Element, Modifier) is a naming convention for classes in HTML and CSS what was developed by Yandex.
Basically, it is a methodology to help you understand better what is going on between you HTML and CSS and styling it better.

Why use BEM?

You don't have to, of course. So why use it?

• BEM gives some structure to you code, it is quite simple to use.
• It makes easier to style your HTML elements and read it.
• It helps to avoid style conflicts,
• Consistency!!!

So, how do I use it?

Okay, let's go to the fun part!

<div class="hero">
   <img class="hero__img">
</div> 

<div class="main">
    <h1 class="main__title">
    <p class="main__text"></p> 
    <p class="main__text-special"></p>  
    <p class="main__text"></p>
</div>

So here, we have a very simple piece of code.
Block:
The < div > is out block. The block element only needs one nice name, and in this case we have hero and main.

Element:
The elements are the item we are putting inside de block. They are part of the block, so they first get the blocks name.
Their second name, should be a description of what it is. Here we have:
"main__text", "main__title" and "hero__img".

Modifier:
While you will use this one probably a little less than the first two, modifiers are important. They tell you that some item may be special yet, still be an element. Our second < p > is called "main___ text-special".
Maybe this one will have a bigger font, of a brighter background. Who knows?
But while it is still a "main__ text", adding the "-special" tells that it will have a differential.

What about those __ and - ???

It is just the way BEM works.
Blocks just need a name, Elements need the block name, the __ and them the elements name, and the modifiers need the above and a - followed by the modifiers name.

Conclusion

I tried to keep this explanation as code newbie as possible and I hope it helps.
BEM is a very helpful methodology, and the few times I don't use it, you bet I will have some style heritage issue lol

*P.S.If you would like something more complete, Smashing Magazine has a great post for Beginners! *

Comments

[Omar Bourhaouta]

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 🥑]

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

[Stephen Belovarich]

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 🥑]

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

[Mikhail]

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

[Mikhail]

Totally agree with you. BEM is obsolete.

[JelilFaisalAbudu]

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 🥑]

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]

Thanks Pati. I like your sincerity.

[Irina Kats]

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

[Dan Jones]

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]

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]

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

[Slava Borodulin]

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]

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

[Pachi 🥑]

It is super simple and helps me a lot!

[Pankaj Sharma]

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

[Pachi 🥑]

Thank for for reading :)

[Denys Shabelnyk]

Useful post.Thanks

[Pachi 🥑]

Thank you for reading!

[jamescalviniv]

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 🥑]

Glad to hear that!
And thanks for reading <3

[Ben Mitchinson]

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

Thanks again for the write up

[Pachi 🥑]

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

[polemius]

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

[Pachi 🥑]

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