cssbem

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

In BEM, I understand that with modifiers, two dashes makes sense so that you can distinguish the modifier in my-block-my-modifier with my-block--my-modifier.

But why use block__element instead of block_element?

Solution

  • 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.