navigation using BEM [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm trying to get my head around BEM, and I'm having troubles even with the most basic things. Such as a menu.
Consider this code
<ul class="menu">
<li class="menu__item">
What
</li>
<li class="menu__item">
Why
</li>
<li class="menu__item">
How
</li>
</ul>
ul is the block, li is the element, but what do I do with that anchor? Since I need both li and a styled, li has to be at very least styled to be inline, a has to be block and stuff. I could make the a a .menu_item, but how would I style that li then, since I'm supposed to not to use element selectors in css and since menu block should be appliable to any html element, something like .menu li {} would be, had I decided to use say div and a combo, senseless..
So how do I do this in the "right" bem way?

Answer 1

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.