You have two options here (or you can decide to use both of them):
Use different elements for li
and a
:
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="/what">What</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/why">Why</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/how">How</a>
</li>
</ul>
Important notice here is that you shouldn't use nested elements like menu__item__link
.
Use separate block for links:
<ul class="menu">
<li class="menu__item">
<a class="link" href="/what">What</a>
</li>
<li class="menu__item">
<a class="link" href="/why">Why</a>
</li>
<li class="menu__item">
<a class="link" href="/how">How</a>
</li>
</ul>
So you can apply rules with a little bit of cascade: .menu .link {}
Or you can use mixes which is the best way I think:
<ul class="menu">
<li class="menu__item">
<a class="link menu__link" href="/what">What</a>
</li>
<li class="menu__item">
<a class="link menu__link" href="/why">Why</a>
</li>
<li class="menu__item">
<a class="link menu__link" href="/how">How</a>
</li>
</ul>
This time you can avoid using cascade but preserve common styles for links on your project.