loading...
Cover image for What is BEM and why use it to name your HTML classes!

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

pachicodes profile image Pachi (she/her/ela) Updated on ・2 min read

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>

Enter fullscreen mode Exit fullscreen mode

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! *

Discussion

pic
Editor guide
Collapse
bourhaouta profile image
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:

BEM

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

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

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

Collapse
steveblue profile image
Steve 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.

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

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

Collapse
host510 profile image
Михаил Гостищев

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

Collapse
goodevilgenius profile image
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.

Collapse
damsalem profile image
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

Collapse
jelilfaisalabudu profile image
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?

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

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!

Collapse
jelilfaisalabudu profile image
JelilFaisalAbudu

Thanks Pati. I like your sincerity.

Collapse
deta19 profile image
mihai

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

Collapse
vborodulin profile image
Viacheslav 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

Collapse
ackmandesu profile image
AckmanDESU

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

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

It is super simple and helps me a lot!

Collapse
spacebromx profile image
Alan Medina

Great post! Definitely BEM is one of those things you really need to know if you want to keep you markup and CSS maintainable!

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

Thanks!!
And yes, BEM ia pretty neat :)

Collapse
topitguy profile image
Pankaj Sharma

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

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

Thank for for reading :)

Collapse
polemius profile image
polemius

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

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

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

Collapse
cathyc93 profile image
Cathy Casey-Richards

Awesome explanation! Thanks for sharing 👍

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

Thank YOU for reading!!!

Collapse
inspiredbynikki profile image
Nikki

Cool beans.
We've recently started using Atomic BEM in our class names: css-tricks.com/abem-useful-adaptat...

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

Oh I didn't know about that, going go read it now!
Thanks!

Collapse
bmitchinson profile image
Ben Mitchinson

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

Thanks again for the write up

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

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

Collapse
jamescalviniv profile image
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!

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

Glad to hear that!
And thanks for reading <3

Collapse
vborodulin profile image
Viacheslav Borodulin

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

Collapse
vborodulin profile image
Viacheslav Borodulin

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.

Collapse
vborodulin profile image
Viacheslav Borodulin

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

GitHub logo bem / bem-react

A set of tools for developing user interfaces using the BEM methodology in React.

bem-react · github (ci)

A set of tools for developing user interfaces using the BEM methodology in React. BEM React supports TypeScript type annotations.

Packages

Contribute

Bem React Core is an open source library that is under active development and is also used within Yandex.

If you have suggestions for improving the API, you can send us a Pull Request.

If you found a bug, you can create an issue describing the problem.

For a detailed guide to making suggestions, see: CONTRIBUTING.md.

License

© 2018 Yandex. Code released under Mozilla Public License 2.0.

But any tool is extra abstraction in your code

Collapse
snorri1986 profile image
Denys Shabelnyk

Useful post.Thanks

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

Thank you for reading!