How does BEM make your life easier?

by Alba López Folgar and Alex Daughter.

What is BEM

BEM is a highly useful, powerful, and simple naming convention to organize classes in html code. It’s one of the most usable methods of class naming. One of the particularities of BEM is that is very clear to use, because BEM are the acronym of “Block Element Modifier”, and, as same as any class naming code, it always works in the same way: “Name of the block_ _name of the element — name of the modifier.” We will explain this better below. For us, as Adalabers, BEM is the main naming convention to use.

Benefits of using BEM (or another naming convention)

The methodology you decide to use does not matter as much as the use of one. It is true that some methods are easier to understand, but they are all useful in multiple ways. In our limited experience, we have realized that having a methodology has many advantages. Such as: it gives you a structure and that increases development speed and the implementation of new features; the CSS codebase in more maintainable in the long term; and it makes easier to work in a group because somehow everyone speaks the same language.

Specifically, BEM provides some concrete benefits that we believe are important to highlight.

On the one hand, the BEM method gives you a solid and simple structure which is easy to understand for everyone working on the same project.

On the other hand, using BEM block styles allows you to avoid cascade problems in your project, plus you can transfer blocks to other new projects. That means that the BEM method is modulable and reusable. This second term also implies reducing the amount of CSS code, making it more maintainable and effective.

How to use BEM

The rules are simple: Name of block_ _name of element — name of modifier. Ok, but, how do you tell the difference between a block, element and modifier? Let’s see:

Block

To be considered a block, the block should encapsulate a main entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.
Examples: header, container, menu, checkbox, input…

Element

An element is a part of a block that has no standalone meaning and is semantically tied to its block.
Examples: menu item, list item, checkbox caption, header title…

Modifier

A modifier has to be the changing part of an element, that makes it change its appearance or behaviour.
Examples: disabled, highlighted, checked, fixed, size big, color yellow…

In conclusion, we could say that it’s better to have a method, whatever it is. To have a method, even if this method has been developed by yourself, it is going to be a rule applied to the whole code. That is almost mandatory. We are not saying that BEM has to be “the method”, but the important point is to have a method, whichever one you choose. For us as junior developers, BEM was quite difficult at the beginning to start using. Still today we are not experts in its use, but we keep trying because we believe that it is the best choice to have a more structured and logical CSS code. BEM is used by a huge amount of developers, so it’s a way to learn and to speak “the same language”.