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

css bem
Gil Birman picture Gil Birman · Jul 10, 2014 · Viewed 13k times · Source

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?

Answer

Imran Bughio picture Imran Bughio · Jul 10, 2014

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.

Related questions

BEM block, naming & nesting

I am trying to wrap my head around BEM naming convention. I am stuck at this. I may misunderstanding something, lets see. I have a sidebar nav and a content nav. My sidebar nav looks like this <div class="…

Read More
naming BEM sub blocks

I'm using a BEM approach to writing html + css. With this syntax: Blocks: block_name Elements: block_name__element_name Modifiers: block_name__element_name--modifier I get confused when I have a block within another block. For instance, in a …

Read More
BEM with SASS and :hover

What's the proper way of declaring active/focus/hover states using BEM with SASS? For example, I have this structure: <div class="card"> <img class="card__image" src="..." alt=""> <div class="card__overlay"> <…

Read More