BEM: Вложенные блоки, какой лучший подход?

Question

В следующей разметке, каков наилучший подход BEM?

Это ?:

<footer role="footer"> 
    <footer class="footer__inner"> 
    <div class="footer__left">© Some text</div> 
    <div class="footer__right">Some text</div> 
    </footer> 
</footer> 

ИЛИ это ?:

<footer role="footer"> 
    <footer class="footer__inner"> 
    <div class="footer__inner__footer__left">© Some text</div> 
    <div class="footer__inner__footer__right">Some text</div> 
    </footer> 
</footer> 

Или никто из них не прав, и вы знаете лучший способ?

Thanks

Answer 1

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

Многоуровневое гнездование блоков нахмурилось. И это по уважительной причине. В случае повторного использования в качестве корневой ссылки должен быть только один блок. Все, что находится ниже этого одного блока, с синтаксической точки зрения bem просто является элементом этого блока. Не суб-блок, не подэлемент, а только элемент.

Итак, BEM не заботится о вашей структуре HTML. Это гораздо больше вопрос о том, какая цель имеет блок или элемент.

Я не могу сказать из вашего примера, какова цель ваших вложенных нижних колонтитулов, но это выглядит так, как если бы вы рассматривали атрибут роли вашего элемента нижнего колонтитула как часть BEM-именования. Но это не так. Имейте в виду идею разделение проблем. role = "footer" - это HTML-семантика. Вы не должны использовать его как ссылку на присвоение имен BEM, потому что однажды вы захотите изменить этот атрибут HTML, а затем ваша семантика BEM будет дыбом.

Итак, вот что я хотел бы сделать.

Допустим, вы хотите, чтобы ваши внешние колонтитулы быть повторно используемым элемент, то вы можете назвать свои классы, как это (только в качестве примера):

<footer class="footer" role="footer"> 
    <footer class="footer__textbox"> 
     <div class="footer__text--left"> <!-- left as modifier --> 
     <div class="footer__text--right"> <!-- right as modifier --> 
    </footer> 
</footer> 

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

Answer 2

Первый вариант выглядит отлично для меня.

Второй не так, поскольку вы не должны отражать структуру DOM в именах классов. См. https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

Пометка на предложение LongHike также хороша.