Per esempio ho un blocco di menu con elementi del menu:Confusione con la convenzione di denominazione delle classi BEM. Un livello più profondo
.menu
.menu__element
.menu__element--current
Ma diciamo .menu blocco è contenuto all'interno di un altro blocco, .header
Come affrontare denominazione in questo caso?
.header
.header__menu
.header__element
o
.header
.header__menu
.header__menu__element
o
.header
.menu
.menu__element
Il menù dovrebbe essere una classe a sé stante in modo .menu dovrebbe essere sufficiente. Se si tratta di un menu che è SOLO in un'intestazione e mai da nessun'altra parte, quindi .header-menu. Quindi puoi puntare direttamente al menu senza passare attraverso la classe di intestazione.
Se si preferisce farlo come descritto, quindi .header_menu.
considerare l'utilizzo di mixins (poche entità sulla stessa DOM-node):
<div class="header">
<ul class="menu header__menu">
<li class="menu__element"></li>
<!-- ... -->
</ul>
</div>
Quindi bloccare menù è anche elemento header__menu al momento. Questo ti dà la possibilità di applicare gli stili per qualsiasi menu astratto e aggiungere alcune regole speciali per un menu particolare all'interno dell'intestazione.
<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 {...}
avrà ragione.
Il nome del blocco non cambia quando il blocco viene inserito in un altro blocco.
BEM vieta porre elementi negli elementi e scrivere classnames come block__element__element, maggiori informazioni: How to properly set an element's scope using BEM?
Ecco cosa la documentazione ufficiale di BEM dice (http://getbem.com/faq/#css-nested-elements);
Non importa quanto in profondità si sta nidificazione, si utilizza sempre il genitore superiore come elemento di blocco. Quindi fondamentalmente sarebbe;
.header
.header__menu
.header__element