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

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