OOCSS & BEM - inline list - How to handle scaffolding, how to add skin?

Question

I am just getting my head around the OOCSS methodology. As I think it makes everything easier to understand, I am also trying to use BEM naming convention.

Using this principle, I am trying to create a navigation for a homepage - basically just an inline list. As OOCSS is about abstraction, I created this CSS so far:

.horizontal-list {
    padding: 0;
    list-style: none;
}

.horizontal-list__item {
    display: inline;
}

I tried not to use a class name like nav or navigation as I first try to layout the structure before applying the skin – and this is where my actual question begins.

To add some color, to change the font-size etc., I would probably just add this as a modifier like .horizontal-list--nav. Another modifier could be for a breadcrumb navigation: .horizontal-list--breadcrumb. Would it be ok to it like this?

To me its logical, as the i.e. the text color has nothing to do with the list being inline per se, but with the list being a breadcrumb for example, but I am not sure if I approach the thing from the wrong direction.

---

Also, the HTML for that list would look something like this:

<ul class="horizontal-list">
    <li class="horizontal-list__item"><a href="#">Link</a></li>
    <li class="horizontal-list__item"><a href="#">Link</a></li>
    <li class="horizontal-list__item"><a href="#">Link</a></li>
</ul>

The li is an element of horizontal-list, that's clear. But what about the a being nested inside the li, how do I markup that? according to the OOCSS principles, I shouldn't do

.horizontal-list__item a {
    color: white;
}

right? But adding a class like horizontal-list__item__item also seems pretty wrong somehow. How do I do that correctly?

Answer 1

In BEM, elements depend on block but not on each other. So, you should mark your links with the class .horizontal-list__link even if in HTML it is placed into another element.

Also, if you use BEM structure on a file system, you do not include element folders into the other element folders. The structure is flatten, like the following:

blocks/
    horizontal-list/
        __item/
            horizontal-list__item.css
        __link/
            horizontal-list__link.css
        horizontal-list.css

Answer 2

• On modifiers. Yes, you're doing it correctly. Modifiers should be understood as flags or properties. You can combine several modifiers on a single node, or even use key-value modifiers (I'm used to Yandex-based BEM notation, so it could be smth like .horizontal-list_theme_green or .horizontal-list_theme_red for themes).

I would say the word "horizontal" shouldn't be the part of your block name. Menus can be vertical as well, and this can also be expressed with a modifier: "my-list my-list_align_horizontal".

• On elements. In BEM, elements can be nested in the HTML structure, but they are always defined as a flat list. So, you should turn your anchor tags into .horizontal-list__link elements or something. Style definitions of different elements should be kept independent whenever possible, so just do:

.horizontal-list__link { color: white }

Things like this are okay though:

.horizontal-list__item:hover horizontal-list__link { color: blue }