Block, Element, Modifier (BEM) Naming Convention for CSS

2 months 3 weeks ago

The Block, Element, Modifier (BEM) methodology is a popular naming convention for classes in HTML and CSS. The main goal of this methodology is to help developers better understand the relationship between the HTML and CSS in a given project. Better style guide can significantly increase development speed, debugging, and the implementation of new features in development but most of the time CSS codebases are sometimes developed without any structure or naming conventions. This leads to an unmaintainable CSS codebase in the long term. The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language.

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

Block

Block represents the higher level of an abstraction or component. Any DOM node can be a block if it accepts a class name. To form a CSS class, add a short prefix for namespacing: .block

<div class="block">...</div>

Block Element

Block element represents a descendent of .block that helps form .block as a whole. Any DOM node within a block can be an element. Within a given block, all elements are semantically equal. CSS class is formed as block name plus two underscores plus element name: .block__element

<div class="block">
	  ...
	  <span class="block__elem"></span>
	</div>

Block Modifier

Block Modifier represents a different state or version of .block They are kind of flags on blocks or elements which are used to change appearance, behavior or state of blocks or elements. Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class: CSS class is formed as block’s or element’s name plus two dashes: .block--mod or .block__elem--mod.

<div class="block block--mod">...</div>
	<div class="block block--size-big
		block--shadow-yes">...</div>

To apply the BEM methodology, we give each element within a block a class. Consider an unordered list:

<ul class="list">
    <li class="list__item">Item 1</li>
    <li class="list__item">Item 2</li>
    <li class="list__item list__item--end">Item 3</li>
</ul>

The unordered list has the block class list while each list item has the element class list__item. Only the final list item has the additional modifier class list__item—end. Each class follows the BEM syntax:

.block{__element[--modifier]}

Here is an example with fairly loose regular classes which do not tell us much.

<form class="form-search full">
    <input type="text" class="input">
    <input type="Submit" value ="Search" class="submit disabled">
</form>

With BEM approach notation we would now have following:

<form class="form-search form-search--full">
    <input type="text" class="form-search__input">
    <input type="Submit" value ="Search" class="form-search__submit form-search--disabled ">
</form>

We have used a block called .form-search which has an element called .form-search__input. We have also a variation or modifier of the .form-search called .form-search--full.

Sass and BEM

For those of you writing Sass and enjoy nesting as a way of scoping styles, you can still author in a nested format, but get CSS that isn't nested, with @at-root:

.block {  
    @at-root #{&}__element {  
    }  
    @at-root #{&}--modifier {  
    }
}

Gets you:

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

See how google team use BEM approach for their analytics table layout styling which helps their developer in building UI blocks. 

BEM Approach

Conclusion

BEM is highly useful, powerful and simple naming convention to make your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit and a lot more strict.

Shahid Hussain

Shahid Hussain is a frontend developer and UX Consultant living and working in Sweden. Shahid is specializes in JavaScript development and developed anything from WordPress websites to complex e-commerce JavaScript applications. Shahid can also sketch, from websites to apps and icons, even print material. He works on content-centric, and mobile products, as well as cross-portal user experiences. Photography, music and travelling can trigger his attention.