Как избежать вложенности в БЭМ?

Question

Как избежать здесь вложенности по БЭМ? Присваивать ссылкам header__list-first-link и header__list-second-link или..?

.header {
  display: flex;
}
.header__list {
  display: flex;
  justify-content: space-between;
  max-width: 200px;
  width: 100%;
}
.header__list_first .header__item-link {
  color: red;
}
.header__list_second .header__item-link {
  color: green;
}

<header class="header">
  <ul class="header__list header__list_first">
    <li class="header__item">
      <a class="header__item-link" href="#">Home</a>
    </li>
    <li class="header__item">
      <a class="header__item-link header__item-link_active" href="#">About</a>
    </li>
    <li class="header__item">
      <a class="header__item-link" href="#">Blog</a>
    </li>
  </ul>
  <ul class="header__list header__list_second">
    <li class="header__item">
      <a class="header__item-link" href="#">Menu</a>
    </li>
    <li class="header__item">
      <a class="header__item-link" href="#">Shop</a>
    </li>
    <li class="header__item">
      <a class="header__item-link" href="#">Contact</a>
    </li>
  </ul>
</header>

Answer 1

.header__menu,
.header__menu-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
}

.header__menu-item {
  list-style: none;
  margin: 0 20px 0 0;
}

.header__menu-item:nth-child(1) .header__menu-link,
.header__menu-item:nth-child(2) .header__menu-link,
.header__menu-item:nth-child(3) .header__menu-link {
  color: red;
}

.header__menu-item:nth-child(4) .header__menu-link,
.header__menu-item:nth-child(5) .header__menu-link,
.header__menu-item:nth-child(6) .header__menu-link {
  color: green;
}

<header class="header">
  <nav class="header__menu">
    <ul class="header__menu-list">
      <li class="header__menu-item">
        <a class="header__menu-link" href="#">Home</a>
      </li>
      <li class="header__menu-item">
        <a class="header__menu-link active" href="#">About</a>
      </li>
      <li class="header__menu-item">
        <a class="header__menu-link" href="#">Blog</a>
      </li>
      <li class="header__menu-item">
        <a class="header__menu-link" href="#">Menu</a>
      </li>
      <li class="header__menu-item">
        <a class="header__menu-link" href="#">Shop</a>
      </li>
      <li class="header__menu-item">
        <a class="header__menu-link" href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>

БЛОГ НА HUSL

Как избежать вложенности в БЭМ?

Ответы (1 шт):