htmlcssclassnaming-conventionsbem

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

Solution

  • 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.