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
}

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

.button

是否有使用SCSS的变通办法？

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

.cool-text.button

在此示例中，.cool-text.button { background-color: black; color: #eee; }具有更高的优先级。

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

Per Quentin，它取决于CSS中的顺序。

Answer 1

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

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

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

这意味着你的设计并不完全正确。为什么不设计一个cool-button类呢？如果您的.button是基类之一，请将其置于CSS文件的顶部，让其他（更具体的）类轻松覆盖它。

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

请参阅此特异性计算器：http://specificity.keegan.st/

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

1 个答案: