OOCSS&BEM - 内联列表 - 如何处理脚手架,如何添加皮肤？

Question

我只是围绕着OOCSS方法.我认为它使一切更容易理解,我也尝试使用BEM命名约定.

使用这个原则,我试图为主页创建一个导航 - 基本上只是一个内联列表.由于OOCSS是关于抽象的,我到目前为止创建了这个CSS:

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

.horizontal-list__item {
    display: inline;
}

我尝试不使用类名,nav或者navigation在应用皮肤之前首先尝试布局结构 - 这就是我的实际问题开始的地方.

要添加一些颜色,更改字体大小等,我可能只是将其添加为修饰符之类的.horizontal-list--nav.另一个修饰符可以用于面包屑导航:.horizontal-list--breadcrumb.它会这样吗？

对我来说它是合乎逻辑的,因为文本颜色与列表本身无关,但是列表是例如面包屑,但我不确定我是否从错误的方向接近了这个东西.

---

此外,该列表的HTML将如下所示:

<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>

这li是一个horizontal-list明确的元素.但是a嵌入其中的li是什么,我如何标记呢？根据OOCSS原则,我不应该这样做

.horizontal-list__item a {
    color: white;
}

对？但是在horizontal-list__item__item某种程度上添加一个类似乎也是错误的.我该怎么做？

Answer 1

在BEM中,元素依赖于块而不是彼此依赖.因此,您应该使用类标记您的链接,.horizontal-list__link即使在HTML中它被放入另一个元素中.

此外,如果在文件系统上使用BEM结构,则不会将元素文件夹包含在其他元素文件夹中.结构扁平,如下所示:

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