Naming Conventions

The primary purpose of BEM methodology is to make names of CSS selectors as informative and transparent as possible. Original BEM style is defined in this way:

Block name is usually a single word like .header, but if you have longer block definition then it is divided with a single hyphen -:

.lang-switcher {/* Styles */}

Element name starts with double underscore __:

.lang-switcher__flag {/* Styles */}

Modifier name starts with single underscore _:

.lang-switcher__flag_basic {/* Styles */}

There is only one very critical rule in BEM methodology – a modifier cannot be used outside of the context of its owner.

Example:

.btn_big {/* Styles */}

You can use btn_big only if header is defined also.

Bad example:

<div class=”btn_big”>...</div>

Good example:

<div class=”btn btn_big”>...</div>

Beside these original BEM styles, there are alternative naming schemes like Harry Roberts and CamelCase styles.

Harry Roberts style example:

.block-name__element-name--modifier-name {/* Styles */}

CamelCase style example:

.BlockName__ElementName_ModifierName {/* Styles */}

There are few others too, but these two are the most common ones. Personally, I am a fan of the naming convention proposed by Harris Roberts, which has the following rules:

  • Names are written in lowercase
  • Words within the names of BEM entities are separated by a hyphen -
  • An element name is separated from a block name by a double underscore __
  • Boolean modifiers are delimited by double hyphens --
  • Key-value type modifiers are not used

The reason why this naming convention is much better formed than others is that you can easily distinguish modifier element from others. In original naming conventions, modifier would be defined like this:

.block__element_modifier {/* Styles */}

But as you can see, there is not very much difference between a single and double underscore. On the other hand, double hyphen provides clean separation, and you can see the modifier instantly:

.block__element--modifier {/* Styles */}
2017-01-29T18:06:22-04:00May 19th, 2016|Guest Blog, Technical Solutions, Tips and Tricks|

About the Author:

Andrew is a technical writer for Deep Core Data. He has been writing creatively for 10 years, and has a strong background in graphic design. He enjoys reading blogs about the quirks and foibles of technology, gadgetry, and writing tips.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.