Search code examples
htmlcsssassbem

navigation using BEM

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?

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.