What is BEM in CSS?

Coding Docs CSS

Naming things are always difficult in the programming world, and in CSS.

Some developers don’t pay that much attention to naming. They claim that there isn’t enough time on thinking about which name to give each class. That may be right, but in the long-run low-quality code consumes much more time.

So there are different approaches to solve the naming problem, and one of them is called Block-Element-Modifier (BEM). In this article, we will have a closer look at what BEM is and how to structure your CSS code with BEM.

If you want to learn more about Web Development, subscribe to our newsletter right on the sidebar section.

What is BEM?

BEM stands for Block, Element, and Modifier. It’s a CSS naming convention for writing cleaner and more readable CSS classes.

BEM also aims to write independent CSS blocks in order to reuse them later in your project. Before we jump into details, you can see below an example of how BEM class namings are:

// Blocks are named as standard CSS classes
.block {
}

// Elements declared with 2 underscores, after block
.block__element {
}

// Modifiers declared with 2 dashes, after block or after element
.block--modifier {
}

// element and modifier together
.block__element--modifier {
}

What is a Block?

Blocks are independent, reusable and usually bigger components of a webpage. They can have modifiers and contain elements.

We can count bigger parts in a webpage like <header>, <nav>, <section>, <form>, <article>, <footer> as block examples.

Youtube Header Navigation as a block

For example, Youtube’s Header Navigation can be used as a block, and can be declared as:

<header class="youtube-header"></header>

<style>

.youtube-header {
  // Rules
}

</style>

Elements

Elements are children of blocks. An element can only have 1 parent Block, and can’t be used independently outside of that block.

Youtube Header Elements as Hamburger Menu, Youtube Logo, Search field and the rest

The naming of an element must start with its parent Block name, 2 underscores after it, and end with its own name:

<header class="youtube-header">
  <img class="youtube-header__logo"/>
  <div class="youtube-header__search"></div>
  <ul class="youtube-header__list">
    <li class="youtube-header__item></li>
    <li class="youtube-header__item></li>
 </ul>
</header>

In HTML Structure, an element can contain another element, but can’t be written in BEM like this:

.youtube-header__list {
  // rules
}
.youtube-header__list__item {
  // rules
}
// There is no such a thing as block__element__element

Since youtube-header is the block, the naming convention of its elements can be written like this:

.youtube-header__logo {
  // rules
}
.youtube-header__search {
  // rules
}
.youtube-header__list {
  // rules
}
.youtube-header__item {
  // rules
}

or the Sass version:

.youtube-header {
  // rules
  &__logo {
    // rules
  }
  &__search {
    // rules
  }
  &__list {
    // rules
  }
  &__item {
    // rules
  }
}

In Sass, & takes the place of the parent’s name.

Modifiers

Modifiers represent different states or styles of classes. They can be used both for blocks or elements.

In HTML a modifier must be used together with its Block / Element, as additional features:

<form class="form form--large">
  <button class="form__button form__button--red"></button>
</form>

The naming of a modifier must start with its parent Block name, 2 dashes after it, and end with its own name.

Block — Modifier:

.form {
  // rules
  .form--large {}  // Block modifiers
  .form--small {}
}

Element — Modifier:

.form {
// rules
.form__button {
// rules

.form__button--red {} // Block Element Modifiers
.form__button--green {}
}
}

What about Great-grandchildren structures?

We will probably have an HTML structure like this:

<header>
<nav>
<ul>
<li>
<a>Some link</a>
</li>
</ul>
</nav>
</header>

Since we can’t name element inside another element, I would use the header as a container, <nav> as the block and the rest just as elements:

.container { }

.navigation {
  // rules
  &__menu { }
  &__item { }
 
  &__link { }    
    
}

and the HTML structure would be:

<header class="container">
  <nav class="navigation">
    <ul class="navigation__menu">
      <li class="navigation__item">
        <a class="navigation__link">Some link</a>
      </li>
    </ul>
  </nav>
</header>

You can read more about the solutions to some common problems of BEM here.

Conclusion

BEM brings just another approach to writing cleaner and maintainable CSS. However, there are also some arguments against BEM that using it is not that useful.

Well using BEM or not is up to you, your team and maybe depends on the project. What do you think? Would you prefer using BEM?

If you want to learn more about Web Development, don’t forget to subscribe to our newsletter.

Thank you for your time & support!

No Spam. We don't share your data with others.

Leave a Reply

Your email address will not be published. Required fields are marked *