Why does BEM often use two underscores instead of one for modifiers?

by

Double Underscore is used to define sub element of a block.

i.e:

<nav class="main-nav">
    <a class="main-nav__item" href="#">Text</a>
</nav>

Where main-nav is a block & main-nav__item is a sub element.

This is done because some people might name their block like this main_nav which will create confusion with single underscore like this : main_nav_item

Therefore double underscore will clarify stuff like this: main_nav__item.

Leave a Comment