Gil Birman Gil Birman - 1 year ago 91
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


But why use
instead of

Answer Source

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.