RU
mrttl
mrttl
26 March 2017

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
#tadatuta
26 March 2017

Hi, @mrttl!

Your markup is fine! 👍

mrttl
#mrttl
26 March 2017

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

ivangretsky
#ivangretsky
21 April 2017

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.