BEM - Blocks Elements and Modifiers

Block, encapsulates a standalone entity that is meaningful on its own such as a nav block.

Element, parts of a block and have no standalone meaning. Any element is semantically tied to its block such as .list-item-link

Modifier, flags on blocks or elements used to change appearance, behavior or state such as --hidden or --hover

1
2
BLOCK__ELEMENT--MODIFIER
nav__list-item-link--active

BEM Example

Contrived example using common html elements ul, li and a 

1
2
3
4
<ul>
   <li><a href="#">Explore</a></li> 
   <li><a href="#">Marketplace</a></li> 
</ul>

Classes that can be used

1
2
3
ul    ->    .list
li    ->    .list-item
a     ->    .list-item-link

So finally this would be

1
2
3
4
<ul class="gh-nav__list">
  <li><a class="gh-nav__list-item-link" href="#">Explore</a></li> 
  <li><a class="gh-nav__list-item-link gh-nav__list-item-link--hover" href="#">Marketplace</a></li> 
</ul>

References