What is CSS BEM

Posted By Sushmit Gaur | 30-Jul-2018

The Block, Element, Modifier methodology or BEM developed by the team at Yendesk is a popular naming convention for classes in HTML and CSS.

Here's how BEM code usually looks like:

/* Block component */
.btn {}
 
/* Element which depends upon the block */
.btn__price {}
 
/* Modifiers that changes the style of that block */
.btn--orange {}
.btn--big {}

 

In this CSS methodology a "Block" is a superior abstraction of a stand alone component, for example a button: ".btn { }". This block should be considered as a parent. Child elements, can be placed inside and are denoted by two underscores followed by the name of the block like ".btn__price { }".

Finally, modifiers are used to manipulate the block so that style can be applied to that particular component without affecting changes on an unrelated module which is done by appending 2 hyphens to the name of the block a bit like ".btn--orange".

 

Here's how the markup might then look like: 

<a class="btn btn--big btn--orange" href="http://css-tricks.com">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a> 

 

This method helps identify which classes are responsible for what and how they depend on one another. For developers build their own components and modify the existing block as they desire. This way any developers can create many different combinations of buttons simply by changing a class in the markup.

 

Why BEM ?

  • More structured CSS and UI
  • Styles are easier to understand and adapt in a team
  • Less confusing than the other methods like SMACSS
  • Less cascading issues
  • Blocks can be transferred from finished projects to new projects
  • Reduces the amount of CSS code

 

Sass and BEM

Following code in SASS:

.block {
  &__element {
  }
  &--modifier {
  }
}

 

will result in something like this:

.block {
}
.block__element {
}
.block--modifier {
}

 

In conclusion BEM useful for constructing scalable and maintainable interfaces where team members have clear idea of how things can be improved.

Request for Proposal

Recaptcha is required.

Sending message..