Почему BEM часто использует два подчеркивания вместо одного для модификаторов?

в BEM я понимаю, что с модификаторами два тире имеет смысл, чтобы вы могли различать модификатор в my-block-my-modifier с my-block--my-modifier.

но зачем использовать block__element вместо block_element?

14
bem css

4 ответов

двойное подчеркивание используется для определения подэлемента блока.

Я.е:

<nav class="main-nav">
    <a class="main-nav__item" href="#">Text</a>
</nav>

здесь main-nav блок & main-nav__item - это вспомогательный элемент.

это делается потому, что некоторые люди могут назвать свой блок так main_nav что создаст путаницу с одним подчеркиванием, как это:main_nav_item

поэтому двойное подчеркивание прояснит такие вещи: main_nav__item.

28

Я собираюсь ответить 2nd @Imran Bughio, но я пытаюсь еще больше прояснить проблему.

на стандартный стиль БЭМ, одиночные подчеркивания зарезервированы для модификаторы. Кроме того, они обычно представляют собой комбинацию пар ключ/значение. Е. Г. 

.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small

это в отличие от изменен синтаксис BEM отстаивается инуитов.в CSS например, которые являются логическими. 

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

из моего опыта при использовании измененного синтаксиса вы быстро сталкиваетесь с ограничениями выражения. Е. Г. если вы хотели написать

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

отношение ключ/значение не будет уникальным, если вы попытаетесь описать ключ, такой как background-attachment что привело бы к

.block__element--background-attachment-fixed

еще одним дополнительным преимуществом является то, что вы можете использовать библиотеки на основе стандартный соглашение об именах для дополнительной производительности в рабочем процессе:

6

также стоит упомянуть, что синтаксис BEM не навязывается нам, и если вы найдете другой синтаксис, который вы найдете более читаемым, то непременно идите с этим. Важно непротиворечивость, обеспечивающая работу других разработчиков с тем же синтаксисом.

пример альтернативного синтаксиса используется в КОСТЮМ CSS Николас Галлахер. Который использует следующий синтаксис.

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

вы можете прочитать больше здесь костюм CSS именования условности

4

потому что чьи блоки могут быть дефисом или подчеркиванием, например:

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

или

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