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

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 }

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

2 个答案: