Confusion with BEM class naming convention. One level deeper

Question

For example I have a menu block with menu elements:

.menu
.menu__element
.menu__element--current

But lets say .menu block is contained inside another block, .header

How to deal with naming 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 unto itself so .menu should suffice. If it's a menu that is ONLY in a header and never anywhere else, then .header-menu. Then you can point to the menu directly without going through the header class.

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

Answer 2

Consider using "mixes" (more than one BEM entity on the same DOM-node):

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

So block menu is also element header__menu at the same time. That gives you the ability to apply styles for any abstract menu and add special rules for that particular menu inside the header.

Answer 3

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

.header {...}
.menu {...}
.menu__element {...}
.menu__element--current {...}

will be right.

Block name does not change when block inserted into another block.

BEM prohibits put an elements in the elements and write classnames like block__element__element, more info: How to properly set an element's scope using BEM?

Answer 4

Here's what the official documentation of BEM says (http://getbem.com/faq/#css-nested-elements);

No matter how deep you're nesting, you always use the top parent as block element. So basically it would be;

.header 
.header__menu 
.header__element