Как правильно установить область видимости элемента с помощью BEM?

Учитывая следующую структуру дерева BEM, где существуют пять вложенных уровней:

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

Так как a author семантически привязано к контексту byline и story, но не имеет смысла при блоках features-top и collection-main, каково наилучшее имя BEM?

Что произойдет, если введен новый блок features?

Наконец, что произойдет, если добавится еще один блок collection, и мы хотим стилить второй элемент author в списке?

Ответы

Ответ 1

BEM запрещает поместить элементы в элементы CSS!
Вы делаете наиболее типичную ошибку в разметке BEM - записываете block__element__element. Вы должны создавать новые блоки, а не копировать DOM-дерево.

Например:
Правильный HTML:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>

Правый CSS:

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Если вам нужно создать элемент элемента, то вам нужно сделать новый блок или сделать ваше bem-tree одним вложенным элементом!

НЕПРАВИЛЬНО:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem1__elem2'></div>
    </div>
</div>

ВПРАВО # 1: создать новый блок

<div class='block1'>
    <div class='block2'>
        <div class='block2__elem'></div>
    </div>
</div>

RIGHT # 2: Создайте свое bem-tree с одним вложенным элементом

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
</div>

Обратите внимание - вы не можете поместить элементы в элементы в css, но вы можете и должны помещать элементы в элементы в html! DOM-дерево и дерево BEM могут быть разными.

Не записывайте странные имена, помещая имя элемента в имя блока!

НЕПРАВИЛЬНО:

.block {}
.block-elem1 {}
.block-elem1__elem2 {}

Поскольку при попытке переместить блок возникает проблема с нечетными именами:

<div class='other-block'>
    <div class='block-elem1'></div>
</div>

Вложенные html-элементы - это DOM-дерево.
Имена классов, которые вы пишете, являются деревом BEM.
Почувствуйте разницу!

DOM-дерево:

<ul>
  <li>
    <a>
      <span></span>
    </a>
  </li>
</ul>

.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}

BEM-дерево:

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

.menu {}
.menu__item {}
.menu__link {}
.menu__text {}

Ссылки:

"Элемент является составной частью блока, который нельзя использовать за его пределами". https://en.bem.info/methodology/key-concepts/#element

Элемент является частью блока! Не часть элемента! Читайте Виталий Харисов, автор BEM-методологии: https://twitter.com/harisov/status/403421669974618112

Имя класса, подобное "block__elem__elem___elem", означает, что кодер ничего не понял в BEM.