navigation using BEM

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?

The anchor isn't a 'block' as such although it might be `display:block` which is a whole different thing. On the other hand you don't have to BEM everything. — Paulie_D, Feb 15 '14 at 19:07
I know it isn't, that's why I'm saying I need to make the list item `display: inline;` and the anchor a `display: block;` to a) achieve the effect I want b) demonstrate the need to style both element. And I know I don't have to BEM everything, but then again I wouldn't want to give up on "proper" BEM at the very first thing I tried BEM on. That's why I'm asking here. — fxck, Feb 15 '14 at 19:10
http://meta.stackexchange.com/questions/90637/is-it-ok-to-ask-a-question-about-naming-conventions and http://meta.stackexchange.com/questions/121289/are-questions-about-naming-classes-relevant-on-stack-exchange — cimmanon, Feb 16 '14 at 12:56
@cimmanon This is hardly about naming, it could be named pen_or or pEnOr for all I care, BEM is, for me anyway, about a way of decoupling html and css. And neither is this opinion-based, there are some rules, or guidelines to go by. The menu example one of the most common cases BEM is presented on(see http://goo.gl/bdl4oi), but it stops at assuming that menu is made by `wrap` and `item`, whilst in the real life, it almost never is. Not quite my fault that people like toothbrush come in with their "hurr durr I have no idea what BEM is but here's my senseless response how to make a menu in HTML" — fxck, Feb 18 '14 at 15:35
@foxx Whether you like it or not, naming conventions are all about opinions (eg. "Don't use descendant selectors because descendant selectors are bad"). You know what you have to do codewise to get the effect you're after, "help me name my class" is no different than "help me name my class according to BEM conventions". — cimmanon, Feb 18 '14 at 15:46
@cimmanon Again, I'm not asking how to name anything, if what you are saying was true("You know what you have to do codewise to get the effect you're after"), you could put on hold most of the bem/oocss/smacss questions. There's a definitely a correct answer to my question(which is in essence how to create a menu, that is appliable to any element) and it has nothing to do with opinions. I feel like most of the people who voted this question opinion-based haven't even heard of, or used bem. Not gonna argue anymore though, I'll just put "don't ask anything bem related on SA" to my notes ;) — fxck, Feb 18 '14 at 16:25

score 7 · Accepted Answer · answered Feb 15 '14 at 19:18

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.

I wouldn't want to use different elements, because menu__item would become obsolete had I used different html elements(like `div` and `a`). Making the anchor a block probably makes sense, I just haven't really seen a block that's at the same time an element before. — fxck, Feb 15 '14 at 19:23
@Paulie_D care to explain how you got that impression? also tadatuta I get it now, you actually meant mixins, not mixes — fxck, Feb 15 '14 at 20:10

navigation using BEM

1 Answers1