Question

我的问题与this one不同，但它是关于相同的原则，所以此引用也与此相关：

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

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

但是，如果设计规定对象的样式在某些容器内部时会发生变化，该怎么办？这是我的问题的简化示例。假设有一个名为foo的对象，以及一个名为bar的容器对象。 foo和bar有自己独立于位置的样式：

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

但是当foo在容器栏内时，如果用户将鼠标悬停在栏上，其颜色需要改变：

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

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

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

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

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

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

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

Answer 1

这里最关心的不是你的链接课程，而是你的课程与位置无关。嵌套将要发生。像OOCSS这样的方法非常棒，因为它们可以帮助您了解嵌套和类命名之类的问题。

Mark Otto 上周发布了代码指南here are some relevant points:

保持选择器简短，并努力将每个选择器中的元素数量限制为三个。

仅在必要时（例如，不使用前缀类时）最近父级的范围类。

他还提供了以下示例：

/* 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 { ... }

当对象样式需要依赖父容器时，我可以坚持容器和内容的OOCSS分离吗？

1 个答案:

进一步阅读