具有相同优先级的冲突 CSS 类（设计原则）

Question

在阅读了有关 SMACSS 的文章后，我正在重新评估我的 CSS 设计选择的有效性。

我检查过的冲突之一是：

<button class="cool-text button"></button>

除了语义，有问题的对象有两个类，它们无论如何都不会相互扩展。现在，如果 CSS 是：

.cool-text {
    background-color: black; // want this
    color: green; // don't want this
    font-size: 16px;
    text-shadow: 0 1px 0 yellow;
}

.button {
    background-color: white; // don't want this
    border: 1px solid;
    border-radius: 4px;
    color: #eee; // want this
}

再一次，这不是一个理想的例子。我想知道，如果我想要来自.cool-text 的background-color 和来自.button 的color 怎么办。在编程语言中，一个对象可以有两个类，您可以指定如何解决方法名称中的冲突。我想类似地，我可以指定.cool-text.button，但我必须重新编写属性，这似乎很糟糕。

.cool-text.button {
    background-color: black;
    color: #eee;
}

是否有任何使用 SCSS 的解决方法？

此外，依赖类属性中类的位置（在普通 CSS 中）是不是一个坏主意。首先指定的类具有更高的优先级，例如：

<button class="green-button button"></button>

在本例中，.green-button 具有更高的优先级。

这似乎为 HTML 添加了 CSS 特性。如果有很多课程，您将不得不花时间弄清楚应该先上哪些课程，这似乎非常违反直觉。

根据 Quentin，它由 CSS 中的顺序决定。

Answer 1

这完全取决于规则的特殊性和顺序。

您的解决方案对我来说非常有意义，因为您最初的想法并不理想（从 class1 中获取 x，从 class2 中获取 y，但这些类是并行的）。但是，如果您最终编写了太多的异常规则，例如：

.cool-text.button {
    background-color: black;
    color: #eee;
}

这意味着你的设计有些地方不太对劲。那么为什么不设计一个cool-button 类呢？如果您的 .button 是基类之一，请将其放在 CSS 文件的顶部，让其他（更具体的）类轻松覆盖它。

另外，please refrain from using !important unless absolutely necessary。

查看这个不错的特异性计算器：http://specificity.keegan.st/