B.E.M. : Naming convention for CSS Classes

What is B.E.M?

The Block, Element, Modifier (B.E.M.) methodology is a popular naming convention for classes in HTML and CSS. It is immensely useful in writing CSS that is easier to read, understand, and scale.
Here’s an example of what a UI developer code while following B.E.M. :

<!-- HTML CODE -->
<header class="header header--light">
 <!--
  `btn` — block;
  `header__btn` — block element `header`;
  `btn--primary` — modifier.
 -->
<button class="btn header__btn btn--primary button--active">            </button>
</header>
<!-- SCSS CODE -->
.header{
   ...
   &--header{
      ...
   }
   &--btn{
      ...
   }
   .btn{
      ...
      &--active{
          ...
      }
   }
}

Why should I use B.E.M.?

BEM naming provides three specific benefits:

1. It communicates the purpose of the class.

If we are reading the markup instead of CSS, we should be able to quickly get an idea of whats the role of that given call (in the previous example we can see that .header — light is a modifier for block header, stating the header background has a light tone color).

2. It communicates component structure

<div class="gallery__carousel carousel">

I can tell from the above that I am looking at a div that is an element in a Gallery block. So I will be able to find this div ‘s positioning within the gallery in the gallery.scss file. Since this is also a Carousel block, I will be able to find the CSS for the Carousel block and the internal Carousel Elements in a carousel.scss file or some sort of global-blocks.scss file.

3. Teamwork

Having regular patterns of CSS usage enables many people to work together. Since BEM is helpful in component and design system (library of components) creation, it helps people work together on big projects.

How It Works

A BEM class name includes up to three parts.

1. Block: The outermost parent element of the component is defined as the block.
2. Element: Inside of the component may be one or more children called elements.
3. Modifier: Either a block or element may have a variation signified by a modifier.

If all three are used in a name it would look something like this:

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

After that brief introduction, let’s look at some specific examples.

1: Navigation Bar

2: Accordion Example

Every coin has 2 sides, yes now it's time for the Pros and Cons of B.E.M.

Pros :

1. Fixes CSS inheritance and specificity issues
2. BEM provides a modular structure to your CSS project. Because of its unique naming scheme, we won’t run into conflicts with other CSS names.
3. Browsers evaluate CSS selectors right to left and BEM encourages developers to create a flat CSS structure with no nested selectors.

Cons :

1. The main hold back for BEM is that sometimes we wind up with very LONG names. However, if you are using SCSS/SASS precompiler, this may not be so bad because we can use nesting.
2. is known that BEM can bloat file sizes with the longer CSS class names, but this can easily be overcome by minifying and gzipping production code.