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

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?

Solution

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