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

Question

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

Answer 1

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.

Answer 2

According to BEM naming convention, single underscore has two other usages,

1. The modifier name is separated from the block or element name by a single underscore (_).
2. The modifier value is separated from the modifier name by a single underscore (_).

So for separating element name from the block name is done by a double underscore.

The element name is separated from the block name by a double underscore (__).

Answer 3

I'm going to 2nd @Imran Bughio's answer, but I'm trying to further clarify the issue.

In standard BEM style, single underscores are reserved for modifiers. Also, they usually represent a combination of key/value pairs. E.g.

.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small

This is in contrast to the modified BEM syntax championed by inuit.css for example, which are boolean.

.block--vertical
.block--horizontal
.block__element--big
.block__element--small

From my experience when using the modified syntax, you quickly run into expression limitations. E.g. if you would write

.block--align-vertical
.block--align-horizontal
.block__element--size-big
.block__element--size-small

The key/value relation would not be unique, if you would try to describe a key such as background-attachment which would result in

.block__element--background-attachment-fixed

Another added benefit is, that you can use the libraries based on the standard naming convention for added productivity in your workflow:

• http://bem.info/tools/bem/bem-tools/
• https://github.com/hoho/jquery-bem

Answer 4

It's also worth mentioning that the BEM syntax is not forced upon us and if you find another syntax that you find more readable then by all means go with that. The important thing is consistency, ensuring other developers work to the same syntax.

An example of an alternative syntax used is in SUIT CSS by Nicolas Gallagher. Which uses the following syntax.

ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfComponent

You can read more here SUIT CSS naming conventions

Answer 5

Because whose blocks can be hyphen or underscore delimited, for example:

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

or

.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */