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

Question

我只是想了解OOCSS的方法。因为我认为它使一切更容易理解，我也尝试使用边界元命名约定。

使用这个原则，我试图创建一个主页的导航-基本上只是一个内联列表。由于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中，我该如何标记呢？根据中央支助厅的原则，我不应该

.horizontal-list__item a {
    color: white;
}

对吗？但是添加像horizontal-list__item__item这样的类似乎也是错误的。我怎样才能正确地做到这一点？

Answer 1

在边界元中，元素依赖于块，而不是相互依赖。因此，您应该使用类.horizontal-list__link标记您的链接，即使在HTML中它被放置到另一个元素中。

此外，如果在文件系统上使用BEM结构，则不将元素文件夹包括在其他元素文件夹中。结构是扁平的，如下所示：

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

Answer 2

• 关于修饰符。是的，你做得很对。修饰符应理解为标志或属性。您可以在单个节点上组合多个修饰符，甚至可以使用键值修饰符(我已经习惯了基于Yandex的边界元表示法，因此它可以类似于主题的.horizontal-list_theme_green或.horizontal-list_theme_red )。

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

• 关于元素。在BEM中，元素可以嵌套在HTML结构中，但它们总是被定义为平面列表。因此，您应该将锚标记转换为.horizontal-list__link元素或其他东西。不同元素的样式定义应尽可能保持独立，因此只需：

.horizontal-list__link { color: white }

不过，像这样的事情是可以的：

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