Correct use of Mix?

[mrttl]

Hello everyone, Just started with BEM and was a bit stuck on how to use it the right way, I have the following code:

<header class="header">
  <div class="header__logo">logo</div>
  <div  class="header__navigation">
    <nav class="header__navigation main-menu">
      <ul class="main-menu">
        <li class="main-menu__list">
          <a href="" class="main-menu__link">link</a>
        </li>
        <li class="main-menu__list">
          <a href="" class="main-menu__link--active">link</a>
        </li>
        <li class="main-menu__list">
          <a href="" class="main-menu__link">link</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Is this the correct use of BEM? As I understand not to nest too deep, so if I wanted to have a new block within an element you can use the mix feature?

Also I wanted to keep .main-menu reusable so I can move the main menu from the header to the sidebar if needed one day.

I hope I got it right :)

[tadatuta]

Hi, @mrttl!

Your markup is fine! 👍

[mrttl]

HI @Tadatuta thank you for checking it out...

[ivangretsky]

I think you should have an extra class here <a href="" class="main-menu__link main-menu__link--active">link</a> instead of just <a href="" class="main-menu__link--active">link</a>

See the example in the docs.