Na przykład mam blok menu z elementami menu:Zamieszanie z konwencją nazewnictwa klas BEM. Jeden poziom głębiej
.menu
.menu__element
.menu__element--current
Ale powiedzmy .menu blok znajduje się wewnątrz innego bloku, .header
Jak radzić sobie z nazewnictwa w tym przypadku?
.header
.header__menu
.header__element
lub
.header
.header__menu
.header__menu__element
lub
.header
.menu
.menu__element
Menu powinno być klasa sama w sobie tak .menu powinno wystarczyć. Jeśli jest to menu, które jest TYLKO w nagłówku i nigdy nigdzie indziej, a następnie menu .header. Następnie możesz wskazać menu bezpośrednio, bez przechodzenia przez klasę nagłówka.
Jeśli wolisz robić to w sposób opisany przez Ciebie, to .header_menu.
rozważyć użycie wstawek (kilka podmiotów na tym samym DOM-node):
<div class="header">
<ul class="menu header__menu">
<li class="menu__element"></li>
<!-- ... -->
</ul>
</div>
więc blokować menu jest również elementem header__menu w tym czasie. To daje możliwość stosowania stylów do każdego abstrakcyjnego menu i dodawania specjalnych reguł dla poszczególnych menu w nagłówku.
<div class="header">
<ul class="menu">
<li class="menu__element">...</li>
<li class="menu__element--current">...</li>
...
</ul>
</div>
.header {...}
.menu {...}
.menu__element {...}
.menu__element--current {...}
będzie miał rację.
Nazwa bloku nie zmienia się, gdy blok zostanie wstawiony do innego bloku.
BEM zabrania umieścić elementy w elementach i napisać classnames jak block__element__element, więcej info: How to properly set an element's scope using BEM?
Oto co oficjalna dokumentacja BEM mówi (http://getbem.com/faq/#css-nested-elements);
Bez względu na to, jak głęboko jesteś gniazdowania, zawsze odwołujemy górną rodzica jako element bloku. Zasadniczo tak;
.header
.header__menu
.header__element