使用 !important 还是指定更多？

Question

我为我网站上一个独特的 "main" 页面指定了一个通用的样式：

#main div.col50 {
    float: left;
    padding: 10px 8px;
    width: 50%;
}

稍后在同一个文件中，我需要覆盖它，因为设计者对该元素有一个独特的要求："it needs to be a little to the left":

#design-div {
    padding-left: 0;
}

现在，这不会覆盖第一个样式，因为它是一个不太具体的选择器。是否更好：

在第二种风格中使用!important，但我不想成为this guy
增加选择性（例如#main #design-div），即使它是一个id（唯一的）并且这样做违反了CSSLint rules and smacks of the beginning of a downward spiral into specificity

?

Answer 1

您应该避免在 css 中使用 id，它们在那里没有任何用处。您可以通过像这样设计 css 来解决此问题：

.main .col50 {
    float: left;
    padding: 10px 8px;
    width: 50%;
}

    .main .col50 .design-div {
        padding-left: 0;
    }

如果您在某些时候觉得自己使用 padding-left 很多，您可以将它变成一个助手 class。

.padding-left-none {
    padding-left: none !important;
}

Helper classes 是我唯一推荐使用 !important 的地方，因为它被有意设置为覆盖默认样式。

Answer 2

除非绝对必要，否则尽量避免使用 !important。它使代码难以维护，因为它停止了级联工作，所以你不能依赖你在下面设置的样式来覆盖上面的样式。

在你的情况下你应该这样做：

#main #design-div.col50 {
    padding-left: 0;
}

或采纳@JimmyRare 的建议并使用类。

Use !important or specify more?