Answer the question
In order to leave comments, you need to log in
Have I understood the basic principles of BEM correctly?
Check if I understood the principles of BEM correctly. Here, for example, I have the following header
. There are three other blocks in the header: logo, menu and info. Here's how I reason - are these blocks elements for the header block? No, they are not, because "An element is a part of a block that is responsible for a separate function. It can only be part of a block and has no meaning apart from it." (from BEM offsite). We can remove any of these elements from the header block (for example, place the menu in the sidebar to the right of the content). Accordingly, we give them regular, non-compound class names.
And now each menu item is an element for the menu block and I call its class: menu__item. If I need to make a special style for the active menu item, a modifier class is added: menu__item_curren_yes.
But what if there is a submenu in the menu, i.e.
<ul class="menu">
<li class="menu__item">Пункт</li>
<li class="menu__item">Пункт</li>
<li class="menu__item">Пункт с подменю
<ul class="???">
<li class="???">Пункт подменю</li>
<li class="???">Пункт подменю</li>
<li class="???">Пункт подменю</li>
</ul>
</li>
<li class="menu__item">Пункт</li>
</ul>
If the style of the submenu items is similar to the style of the main menu items, it is logical (in the standard layout) to set li to the same menu_item class. Suppose the submenu items should be shifted slightly to the right. Then, we set the ul class, for example, submenu, in the styles of this class we indicate the required indentation. And what is the right thing to do in this case from the point of view of the BEM concept? After all, as I understand it, in the case of BEM layout, each block / element of the page must have its own unique class.
Answer the question
In order to leave comments, you need to log in
I don’t know what you want to do, but this markup is enough for anything.
And BEM is not a way to name classes. You also need to look at css, most likely there are the most serious errors.
<ul class="menu">
<li class="menu__item"><a href="#">Пункт</a></li>
<li class="menu__item menu__item_active"><a href="#">Пункт</a></li>
<li class="menu__item menu__item_submenu">
<a href="#">Пункт с подменю</a>
<div class="menu__submenu">
<ul class="submenu">
<li class="submenu__item"><a href="#">Пункт подменю</a></li>
<li class="submenu__item"><a href="#">Пункт подменю</a></li>
<li class="submenu__item submenu__item_active"><a href="#">Пункт подменю</a></li>
</ul>
</div>
</li>
<li class="menu__item">Пункт</li>
</ul>
<div class="header">
<div class="header__logo">
<div class="logo"></div>
</div>
<div class="header__menu">
<div class="menu"></div>
</div>
<div class="header__info">
<div class="info"></div>
</div>
</div>
There are no hard and fast rules outside of bem tools, it's just a convention to approach class naming.
Here you can also read: habrahabr.ru/company/yandex/blog/234905
And it would be more correct to ask a question on their main forum.
Also, for example, here is a real project made on bam using bem tools
https://github.com/alexbaumgertner/hunter-boat
As for naming classes, I would do this:
<ul class="l-menu">
<li class="l-menu-item">Пункт</li>
<li class="l-menu-item l-menu-item_active">Пункт</li>
<li class="l-menu-item l-menu-item_submenu">
Пункт с подменю
<ul class="l-menu-submenu">
<li class="l-menu-subitem">Пункт подменю</li>
<li class="l-menu-subitem">Пункт подменю</li>
<li class="l-menu-subitem l-subitem_active">Пункт подменю</li>
</ul>
</li>
<li class="l-menu-item">Пункт</li>
</ul>
There is an article on our blog - KBEM - Container, Block, Element, Modifier . Pretty detailed.)
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question