使用！important或指定更多？

Question

我的网站上有一个独特的“主要”页面专栏，我有一般的样式：

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

稍后在同一个文件中，我需要覆盖它，因为该元素具有设计者的独特要求：“它需要稍微向左”：

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

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

• 在第二种风格中使用！important，但我不想成为this guy
• 提高选择性（例如#main #design-div），即使它是一个ID（唯一）并且这样做会违反CSSLint rules并且有点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，那么您可以将其变成帮助类。

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

Helper类是我建议使用!important的唯一地方，因为它有意设置为覆盖默认样式。

Answer 2

除非绝对必要，否则尽量避免使用！important。它使代码难以维护，因为它会停止级联工作，所以你不能再依赖你进一步设置的样式了。

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

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

或接受@ JimmyRare的建议并使用课程。