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

bem, css

Solution

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`.

Problem

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`?

Original source