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

Question

我刚刚开始了解 OOCSS 方法。因为我认为这让一切都更容易理解，所以我也在尝试使用 BEM 命名约定。

使用这个原则，我正在尝试为主页创建一个导航——基本上只是一个内联列表。由于 OOCSS 是关于抽象的，所以到目前为止我创建了这个 CSS:

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

.horizontal-list__item {
    display: inline;
}

我尽量不使用像 nav 或 navigation 这样的类名，因为我首先尝试在应用皮肤之前对结构进行布局——这就是我真正的问题开始的地方.

要添加一些颜色，更改字体大小等，我可能只是将其添加为修饰符，如 .horizo​​ntal-list--nav。另一个修饰符可以用于面包屑导航:.horizo​​ntal-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 是horizo​​ntal-list 的一个元素，很明显。但是如果 a 嵌套在 li 中，我该如何标记它呢？根据OOCSS原则，我不应该这样做

.horizontal-list__item a {
    color: white;
}

对吧？但是添加像 horizo​​ntal-list__item__item 这样的类在某种程度上似乎也是错误的。我该如何正确地做到这一点？

Answer 1

在 BEM 中，元素依赖于 block 而不是相互依赖。因此，您应该使用 .horizo​​ntal-list__link 类标记您的链接，即使在 HTML 中它被放置在另一个元素中也是如此。

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

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