How to use BEM (Block, __Element, --Modifier)

Have you heard BEM, if yes BEM (means Block, Element, Modifier) methodology is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, writing css is easy, but organizing and maintaining is the hardest task when it comes to designing. I would say goal of BEM is to create and maintain understandable code in style sheet.

An example of BEM style might look like:

/* Block component */

.btn {}


/* Element that depends upon the block */ 
.btn__price {}


/* Modifier that changes the style of the block */

.btn--orange {} 

.btn—big

In this CSS methodology a block is a top-level abstraction of a new component, for example a button: .btn { }. This block should be thought of as a parent. Child items, or elements, can be placed inside and these are denoted by two underscores following the name of the block like .btn__price { }. Finally, modifiers can manipulate the block so that we can theme or style that particular component without inflicting changes on a completely unrelated module. This is done by appending two hyphens to the name of the block just like btn--orange.

The markup might then look like this:

<a class="btn btn--big btn--orange" href="https://css-tricks.com">

<span class="btn__price">12</span>

<span class="btn__text">$</span>

</a>

If another engineer composed this markup, and we weren't familiar with the CSS, in any case have a smart thought of which classes are in charge of what and how they rely upon each other. Engineers would then be able to fabricate their very own segments and adjust the current square to their heart's substance. Without composing much CSS, engineers are potentially capable of creating many different combinations of buttons simply by changing a class in the markup

Sass and BEM

SASS

.block {

 @at-root #{&}__element {}

@at-root #{&}--modifier {}

}
CSS

.block {}

.block__element {}

.block--modifier {}

thats all. no magic, it is just a best practice to follow and keep the code clean.