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的一个元素，这是清楚的。但是嵌套在li中的a呢，我该如何标记呢？根据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

Answer 2

• 在修饰符上。是的，你做对了。修饰符应理解为标志或属性。您可以在单个节点上组合多个修饰符，甚至可以使用键值修饰符（我习惯了基于 Yandex 的 BEM 表示法，因此它可以像主题的 .horizontal-list_theme_green 或 .horizontal-list_theme_red 一样）。

我会说"水平"这个词不应该是你的块名称的一部分。菜单也可以是垂直的，这也可以用修饰符表示："my-list my-list_align_horizontal"。

• 在元素上。在 BEM 中，元素可以嵌套在 HTML 结构中，但它们始终定义为平面列表。因此，您应该将锚标签转换为.horizontal-list__link元素或其他东西。不同元素的样式定义应尽可能保持独立，因此只需执行以下操作：

.horizontal-list__link { color: white }

不过这样的事情没关系：

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