What is BEM?

4 min readApr 7, 2021

BEM it’s a very useful development methodology based on components. The base of this methodology is to divide the user interface into separate blocks to create scalable, flexible and reusable components. Also, it proposes a style to name each of the classes, thus allowing to create a consistent and clear code (also helps you with the difficult task of finding the best names for each element).

BEM = Block + Element + Modifier

BLOCKS

A block is a container where other elements will be. A block is the root of the CSS class and will always go first, and from it, we will create the other classes. A block is independent and can work alone.

Example: .card

<div class="card"> test </div>

Card has all the properties to work alone and if you only add a “card” class you can see a simple card.

ELEMENT

An element is one of the pieces that the block will have. For example, following the last example, we can create a new element inside the card: the title. These elements can’t work alone (like modifiers), because they are attached to their block (their father).

The naming convention is to put 2 underscores before the element: .card__title

MODIFIER

Like the name said, it’s a modifier. You can use whatever you want and modify the elements or the block directly. For example, you can have 2 different titles: red and blue. But also, you can have 2 different cards: card with red background and other with blue background.

Here, the naming convention is to add 2 hyphens before the modifier.

Modify a block:

card — red
card — blue

Modify an element inside a block:

card__title — red
card__title — blue
card__title — bold

ADDING A BLOCK INSIDE ANOTHER BLOCK

Is this possible? Of course! Remember that a block is an independent component, but you can create other components and add them inside others blocks.

We are going to see an example:

In the last example with the card, now we want to add a checklist inside the card. What we have to do is create our new component (.checklist ) independently. The result will be:

<ul class="checklist">  <li class="checklist__item"> Text </li>  <li class="checklist__item--green"> Text </li>  <li class="checklist__item"> Text </li>  <li class="checklist__item"> Text </li></ul>

Check that we have a block, an element (item) and a modifier (green).

And now, we can add it into the card, so the final result will be:

<div class="card">
  
  <h3 class="card__title card__title--blue card__title--bold"> 
    Title     
  </h3>  <ul class="checklist">    <li class="checklist__item"> Text </li>    <li class="checklist__item checklist__item--green"> Text </li>    <li class="checklist__item"> Text </li>    <li class="checklist__item"> Text </li>  </ul></div>

Advantages and disadvantages

Advantages

Independent and portable code, so you can move your code to a different HTML structure.
Better CSS performance because you don’t need to use nested selectors. So the less browsers have to evaluate, the faster they can render.
Easy and clear naming.
Ease of code maintenance: having independent modules of code and hence easier to maintain and update without affecting other modules.
Improves multiple inheritance: You can change any of the three elements (block, module or modifier) without affecting the others.

Disadvantages

You have to learn the methodology.
Names can be very large and file sizes may grow. (Although you can minify production code).
Ugly code: code can look nasty with these classes names.

More info: http://getbem.com/