navigation using BEM [closed]

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 8 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">
        <a href="/what">What</a>
    </li>

    <li class="menu__item">
        <a href="/why">Why</a>
    </li>

    <li class="menu__item">
        <a href="/how">How</a>
    </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.