Zamieszanie z konwencją nazewnictwa klas BEM. Jeden poziom głębiej

Question

Na przykład mam blok menu z elementami menu:

.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 

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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