2

我只是了解 OOCSS 方法论。因为我认为它使一切更容易理解，我也在尝试使用 BEM 命名约定。

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

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

.horizontal-list__item {
    display: inline;
}

我尽量不使用类名nav，比如navigation我第一次尝试在应用皮肤之前布局结构 - 这就是我的实际问题开始的地方。

要添加一些颜色，更改字体大小等，我可能只是将其添加为修饰符，例如.horizontal-list--nav. 另一个修饰符可能是面包屑导航：.horizontal-list--breadcrumb. 这样可以吗？

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

此外，该列表的 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某种程度上似乎也很错误。我该如何正确地做到这一点？

4

2 回答 2

7

在 BEM 中，元素依赖于块，但不依赖于彼此。.horizontal-list__link因此，即使在 HTML 中它被放置到另一个元素中，您也应该使用该类标记您的链接。

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

blocks/
    horizontal-list/
        __item/
            horizontal-list__item.css
        __link/
            horizontal-list__link.css
        horizontal-list.css
于 2013-10-27T19:18:27.513 回答
-1
  • 关于修饰符。是的，你做对了。修饰符应该被理解为标志或属性。您可以在单个节点上组合多个修饰符，甚至使用键值修饰符（我习惯于基于 Yandex 的 BEM 表示法，因此它可能类似于主题.horizontal-list_theme_green或.horizontal-list_theme_red主题）。

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

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

.horizontal-list__link { color: white }

像这样的事情是可以的：

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

于 2013-10-22T20:57:50.663 回答