navigation using BEM

bem, css, html, sass

Solution

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.

Problem

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?

Original source