Gil Birman Gil Birman - 2 months ago 15
CSS Question

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
?

Answer

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 cuz some peoples might name there 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.