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

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

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

ОТВЕТЫ

Ответ 1

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

то есть:

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

Ответ 2

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

В стандартном стиле BEM отдельные символы подчеркивания зарезервированы для модификаторов. Кроме того, они обычно представляют собой комбинацию пар ключ/значение. Например.

.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small

Это в отличие от модифицированного синтаксиса BEM, защищенного inuit.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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

или

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

Ответ 5

В соответствии с соглашением об именах БЭМ, одно подчеркивание имеет два других использования,

  1. Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).
  2. Значение модификатора отделяется от имени модификатора одним подчеркиванием (_).

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

Имя элемента отделяется от имени блока двойным подчеркиванием (__).