Again about elements nesting

[deser]

Here what I see on BEM site (https://en.bem.info/methodology/quick-start/#introduction):

Create an element If a section of code can't be used separately without the parent entity (the block).

The exception is elements that must be divided into smaller parts – subelements – in order to simplify development. In the BEM methodology, you can't create elements of elements. In a case like this, instead of creating an element, you need to create a service block.

Here is HTML of the page where that text is written:

<ul class="article__list">
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
   <li class="article__list-item"></li>
</ul>

It's obvious that article__list-item can't be re-used without article__list. Why isn't article__list block then?

[skad0]

It is really depends on context. For example, if we talking about very simple list like we have in example, it is obvious that creating new block is just make no sense.

But, e.g. you have list as something more complex you can just simply use it as a block and specify some specific staff with mix:

<div class="article">
  <ul class="list article__list">
    <li class="list__item"></li>
  </ul>
</div>

[deser]

I think it's incorrect. List is naturally block. You can't re-use article__list-item in this site. This markup is confusing, and mixin (is what you've wrote) is to my mind correct. Why I'm asking this is because methodology need to be more strict and prescriptive. Otherwise you'd always think how to create such sort of constructions.

[deser]

One more example:

<ul class="menu">
    <li class="menu__item">
        <a class="menu__link" href="https://">...</a>
    </li>
</ul>

The problem is in CSS code which doesn't reflect that .menu__link is obliged to be used within .menu__item, it doesn't have sense if used as a child of .menu. In other words, logically, the only what could be inside .menu is .menu__item, nothing else.

So CSS would be confusing when reading by other developers.

[ghost]

is this correct?

  <nav class="navbar">
    <ul class="navbar__menu menu">
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
      <li class="menu__item"><a class="menu__link" href="#">BEM</a></li>
    </ul>
  </nav>