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