Confusion with the BEM class naming convention. One level deeper

Question

For example, I have a menu block with menu items:

.menu .menu__element .menu__element--current 

But let's say that the .menu block .menu contained inside another block, .header

How to deal with the name in this case?

 .header .header__menu .header__element 

or

 .header .header__menu .header__menu__element 

or

 .header .menu .menu__element 

Answer 1

The menu should be a class for yourself, so .menu should be enough. If this is a menu that is ONLY in the title and never anywhere else, then .header-menu. Then you can directly specify the menu without going through the header class.

If you prefer to do it the way you intended, then .header_menu.

Answer 2

Consider using mixins (multiple objects on the same DOM node):

 <div class="header"> <ul class="menu header__menu"> <li class="menu__element"></li> <!-- ... --> </ul> </div> 

Thus, the menu block is also a header__menu element. This gives you the opportunity to apply styles to any abstract menu and add special rules for a specific menu inside the header.

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 {...} 

will be correct.

A block name does not change when a block is inserted in another block.

BEM forbids putting elements into elements and writing class names such as block__element__element , more information: How to set the element's scope with BEM?

Answer 4

This is what the official BEM documentation says ( http://getbem.com/faq/#css-nested-elements );

No matter how deep you are nested, you always use the top parent as a block element. So basically it would be:

 .header .header__menu .header__element