1

我的问题与这个不同，但它是关于相同的原则，所以这句话在这里也很重要：

来自https://github.com/stubbornella/oocss/wiki

本质上，这意味着“很少使用与位置相关的样式”。一个物体无论放在哪里都应该是一样的。因此，不要使用 .myObject h2 {...} 设置特定 h2 的样式，而是创建并应用一个描述相关 h2 的类，例如 h2 class="category"。

但是，如果设计要求对象在某些容器中时其样式会发生变化怎么办？这是我的问题的简化示例。假设有一个名为 foo 的对象和一个名为 bar 的容器对象。foo 和 bar 有自己的与位置无关的样式：

.foo {
    ...
}
.bar {
    ...
}

但是当 foo 像这样在容器 bar 内时，当用户将鼠标悬停在 bar 上时，它的颜色需要改变：

<div class="bar">
    ...
    <div class="foo">
        ...
    </div>
    ...
</div>

在这种情况下，您似乎无法避免编写一个与位置相关的选择器，如下所示：

.bar:hover .foo {
    // color style
}

我想到的一个解决方案是引入一个明确依赖于 bar 的类（使用BEM 命名约定来明确父子关系），并将其添加到 foo 对象：

<div class="bar">
    ...
    <div class="foo bar__foo">
        ...
    </div>
    ...
</div>

.bar:hover .bar__foo {
    // color style
}

我想确认一下，这是处理问题的好方法吗？OOCSS 中还有其他方法吗？

4

1 回答 1

1

这里最大的问题不是您将类链接在一起，而是您的类与位置无关。嵌套将会发生。像 OOCSS 这样的方法很棒，因为它们可以帮助您了解嵌套和类命名等事情何时出错。

Mark Otto上周发布了代码指南，以下是一些相关点：

  • 保持选择器简短，并努力将每个选择器中的元素数量限制为三个。
  • 仅在必要时（例如，当不使用前缀类时）将类范围限定为最近的父类。

他还提供了这些例子：

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

简而言之：旨在将一个类限定为它的父类。不要超过 3 个选择器。

你很好：

.bar:hover .foo { ... }

延伸阅读

于 2014-03-06T05:06:17.240 回答