Which naming option is more correct (BEM)?

Question

css

There are a few moments that after a while can not settle down in my head.
Which option is more correct from the options below? Or is there no more correct one at all, and everyone writes as he pleases?

1st option - the most flat structure without utility classes
2nd option - less flat structure with utility classes
3rd option - the class structure accurately reflects the nesting of elements

<div class="main">
  <nav class="main__nav">
    <ul class="main__nav-list">
      <li class="main__nav-item">
        <a href="#" class="main__nav-link">Home</a>
      </li>
      <li class="main__nav-item">
        <a href="#" class="main__nav-link">Work</a>
      </li>
      <li class="main__nav-item">
        <a href="#" class="main__nav-link">About us</a>
      </li>
    </ul>
  </nav>
</div>

/ / / / /

<div class="main">
  <nav class="main-nav">
    <ul class="main-nav__list">
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Home</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Work</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

/ / / / /

<div class="main">
  <nav class="main-nav">
    <ul class="main-nav-list">
      <li class="main-nav-list-item">
        <a href="#" class="main-nav-list-item__link">Home</a>
      </li>
      <li class="main-nav-list-item">
        <a href="#" class="main-nav-list-item__link">Work</a>
      </li>
      <li class="main-nav-list-item">
        <a href="#" class="main-nav-list-item__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

The second option is more correct, but you put the wrong meaning into it, you indirectly attached main-nav to the main context and this is very noticeable in the 3rd example, where you exaggerated this problem, the 3rd example is terrible, never do that. The 1st example is correct in naming, but will not always be correct in structure, since navigation is most likely a separate block. As a result, it will be more correct, short and concise like this:

<div class="main">
  <nav class="main__nav nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a href="#" class="nav__link">Home</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">Work</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

You were rightly told about mixes, but it’s more correct to make a modifier element with the name of the block to which we are mixing, that is, main__ nav nav and if you make a mix according to your scheme, then you get this tautology main__main-nav main-nav , and if you make 2 mixes (which sometimes also happens) in the 3rd example, then main__main-nav-list main-nav__main-nav-list main-nav-list becomes bad and perhaps in this example it will become more clear to you why you shouldn’t do this and what task decides BEM

Everyone writes as he pleases.

Usually this happens when they don’t fully understand the concept, or simply don’t want to properly structure it, as it can take longer than they would like, as a result, they get into the habit of missing some moments and get their own BEM with blackjack ..

Answer 2

3rd option - the class structure accurately displays the nesting of elements

It will not work - no one reuses menu items separately from the menu, and li outside ul is not possible. This is only possible if the elements have a "rich inner world" (complex enough to be put into separate blocks). But that's not the case here.
Options 1 and 2 are almost identical and both are applicable, but I would choose option 2, since it’s still better to put the menu in a separate block.
Well, don't forget about mixes - the main-nav block can also be an element of the parent main__nav and all external geometry (outer padding and positioning) will be applied to the element .main__nav, not to the block.main-nav

<div class="main">
  <nav class="main-nav main__nav">
    <ul class="main-nav__list">
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Home</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">Work</a>
      </li>
      <li class="main-nav__item">
        <a href="#" class="main-nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>