CODEWITHSUNDEEP
htmlcssclassnaming-conventionsbem
gskalinskii
gskalinskii

Reputation: 965

Confusion with BEM class naming convention. One level deeper

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

Upvotes: 7

Views: 2884

Answers (4)

tadatuta
tadatuta

Reputation: 2025

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.

Upvotes: 8

Ihor Zenich
Ihor Zenich

Reputation: 13485

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

Upvotes: 2

SimonS
SimonS

Reputation: 926

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

enter image description here

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

Upvotes: 0

Rob
Rob

Reputation: 15150

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.

Upvotes: 3

Related Questions