BEM will make you happy

BEM (which stands for Block-Element-Modifier) is a standard in the world of CSS and is immensely useful for writing CSS that is easier to read, understand and scale.

Why should I use it?

When working with BEM, the main benefits are two:

  • It is easy to assimilate.
  • Creates a scalable structure easy to maintain.

What is this about BEM?

A BEM class name is differentiated by having three parts:

[block]__[element]--[modifier]

1- Block: the most external parent element of the component is defined as the block. We could say that this class contains the most generic and reusable features.

2- Element: Within the component there may be one or more elements called elements. The element adds new features to the block. Without overwriting any property at any time.

3- Modifier: A block or an element can have a variation indicated by a modifier.

Now that we know the theory, let’s get down to business. Examples:

A block without elements or modifiers

Simple components can only use a single element and, therefore, a single class, which would be the block.

<style>
.btn {}
</style>
<button class="btn"></button>

A component with a simple modifier

As we have seen in theory, a component can have a variation. The variation must be implemented with a modifier class. Don’t use the modifier class by itself. The modifier class is intended to increase, not replace, the base class.

<!-- GOOD -->
<style>
.btn {
display: inline-block;
color: blue;
}
.btn--secondary {
color: green;
}
</style>
<button class="btn btn--secondary"></button>

<!-- BAD -->
<style>
.btn--secondary {
display: inline-block;
color: green;
}
</style>
<button class="btn--secondary"></button>

A component with elements

More complex structures will have children elements. Each child element that needs a style must include a named class. One of the purposes behind BEM is to keep the specificity low and consistent. Do not omit the class names of the child elements in your HTML. That will force you to use the selector with greater specificity for those elements within the component.

<!-- GOOD -->
<style>
.card { }
.card__title { }
.card__description { }
</style>
<div class="card">
<h1 class="card__title"></h1>
<p class="card__description"></p>
</div>

<!-- BAD -->
<style>
.card { }
.card h1 { }
.card p { }
</style>
<div class="card">
<h1></p>
<p></p>
</div>

If the structure has child elements with several levels of depth, do not try to represent each level in the name of the class.

BEM does not intend to communicate structural depth. A BEM class name that represents a child element in the component should only include the base / block name and the name of an element.

<!-- GOOD -->
<style>
.card { }
.card__title { }
.card__description { }
.card__excerpt { }
.card__button { }
</style>
<div class="card">
<h1 class="card__title"></h1>
<div class="card__description">
<p class="card__excerpt"></p>
<button class="card__button"></button>
</div>
</div>

<!-- BAD -->
<style>
.card { }
.card__title { }
.card__description { }
.card__description__excerpt { }
.card__description__button { }
</style>
<div class="card">
<h1 class="card__title"></h1>
<div class="card__description">
<p class="card__description__excerpt"></p>
<button class="card__description__button"></button>
</div>
</div>

Element with a modifier

In some cases, you may want to change a single element in a component. In those cases, a modifier must be added to the element instead of the component.

<style>
.card { }
.card__title { }
.card__title--big { } /* incremental style changes */
.card__description { }
.card__excerpt { }
.card__button { }
</style>
<div class="card">
<h1 class="card__title card__title--big"></h1>
</div>

Style elements based on the component modifier

If you are modifying the elements of the same component in the same way, consider adding the modifier to the base of the component and adjusting the styles for each secondary element based on that modifier. This will increase the specificity and make the modification of the component much simpler.

<!-- GOOD -->
<style>
.card--dark .card__title { }
.card--dark .card__description { }
</style>
<div class="card card--dark">
<h1 class="card__title"></h1>
<p class="card__description"></p>
</div>

<!-- BAD -->
<style>
.card__title--dark { }
.card__description--dark { }
</style>
<div class="card">
<h1 class="card__title card__title--dark"></h1>
<p class="card__description card__description--dark"></p>
</div>

And what about multi-word names?

The intentionality when using double low scripts and double hyphens instead of simple to separate the block element modifier is precisely for this. Thus, simple hyphens can be used as word separators. The names of the classes should be easy to read, so the abbreviation is not always desirable unless the abbreviations are universally recognizable.


And if after reading everything has not convinced you that this is the easiest way to generate CSS, I leave an article-tutorial that I wrote about SASS. Another way to work with CSS — Although you could actually make a combination of both.