Have I understood the basic principles of BEM correctly?

Question

HTML

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 1

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>

As I understand it, you caught the BM disease, newbies always get into it

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

Answer 2

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

Answer 3

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>

In general, one should not be afraid to refine the methodologies "for oneself". Ease of development and support is largely subjective.
Personally, I use my modified bam approach and I really like it.

Answer 4

There is an article on our blog - KBEM - Container, Block, Element, Modifier . Pretty detailed.)