Pachi 🥑

Posted on May 7, 2020 • Edited on Jan 13, 2021 • Originally published at pachicodes.com

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

#html #webdev #css

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

Oldest comments (36)

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

Nikki • May 7 '20

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

Pachi 🥑 • May 8 '20

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

Denys Shabelnyk • May 8 '20

Useful post.Thanks

Pachi 🥑 • May 8 '20

Thank you for reading!

Alan Medina • May 8 '20

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

Pachi 🥑 • May 10 '20

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

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 :)

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.

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

bem / bem-react

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

bem-react ·

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

Packages

Package	Version	Size
@bem-react/classname
@bem-react/classnames
@bem-react/core
@bem-react/di
@bem-react/eslint-plugin		—

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

View on GitHub

But any tool is extra abstraction in your code

Irina Kats • Jan 13 '24

This might be a holywar... At least, there are different opinions about it, such as andrejgajdos.com/css-modules-vs-cs... or medium.com/@perezpriego7/css-evolu....

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!

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 :)

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

View full discussion (36 comments)