Using BEM convention in naming classes

Using BEM convention in naming classes

Anita Ihuman 's photo
Anita Ihuman
·

5 min read

Naming: as simple as it sounds is one of the difficult aspects of programming and CSS in particular. Most developers are too focused on arriving at a final result of a project, they pay very little attention to naming classes in CSS. I must admit I used to make this mistake when naming classes too. This always made reading my code exhausting because I gave the classes the weirdest names. 😂😂😂

There are several approaches that are suitable for fixing the naming problems in CSS, one of which is the Block-Element-Modifier(BEM )convention of naming classes.

BEM?

BEM stands for Block, Element, and Modifier. It is a popular CSS convention of naming classes that helps you to achieve a cleaner and readable code. It is basically a methodology that helps you understand better what is going on between HTML and CSS and styling it better.

Benefits of BEM

  • It communicates purpose or function: Using BEM makes it easy to quickly get an idea of which element depends on another.
  • It helps to avoid style conflicts.
  • It communicates component structure: If you want to include new styles for a component you might realise that there is already a pre-existing modifier that does what we need.

  • It sets a consistency on a codebase: Developers and designers often name components for easier communication between team members.

    So Let us Get started😀!!!!

start.gif

What is a Block?

Blocks are the independent, reusable and usually bigger components of a webpage. Within a block, you can find elements and modifiers depending on how big that block is. For instance, we can say a Navbar is a typical Block and it will appear this way: Screenshot 2021-02-09 at 13.16.13.png

<header class="nav-header">

</header>

What is are Elements?

The element is an item we are putting inside the block. They are a part of the block, so they first get the blocks name(The parent name) followed by an underscore and then its name. Just like in the example below.

<img class="nav-header__logo"/>
  <div class="nav-header__search">
<input type="text"  class="nav-header__input">
</div>
  <ul class="nav-header__list">
    <li class="nav-header__item></li>
    <li class="nav-header__item></li>
    <li class="nav-header__item></li>
    <li class="nav-header__item></li>
  </ul>

All these are going to be within the block. In CSS, it is written as:

.nav-header__logo {
 // CSS rules 
}
.nav-header__search {
 // CSS rules 
}
.nav-header__list {
 // CSS rules 
}
.nav-header__input{
   // CSS rules 
}

What is a Modifiers?

The modifiers are important in CSS. They tell you that some items may be different yet, still be an element. Modifiers must be used together with its Block / Element, as additional features. When writing a modifier, you must start with the parent name, followed by 2 dashes and then its own name. Just like in this example. Block — Modifier:

<header class="btn--bold">

</header>

and written like this in CSS:

.btn{

  .btn--bold{
}  

}

Element — Modifier:

 <div class="nav-header__search--red">
<input type="text"  class="nav-header__input--wide">
</div>

and written like this in CSS:

.nav-header {
 // CSS rules 
  .nav-header__search{
 // CSS rules 
    .nav-header__search--red {

}    
   }
}

Conclusion

If you are not using BEM yet, and are encountering naming difficulties, I would highly recommend using it on your next project. It may seem strange and difficult at first but with constant practice, you will get a hang of it. I hope you find this article really helpful in avoiding common mistakes when naming.

References

CSS