Как избежать здесь вложенности по БЭМ? Присваивать ссылкам 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>
header__item-link
этого достаточно, зачем вложенность?i-1
,i-2
,i-3
которые сами по себе не должны нести никакие стили. И брать.header__list.i-1