标题只能定义一次

Question

刚刚通过 csslint 运行了相当数量的 css，主要是为了检查错误。我收到的 80% 的警告来自多次定义相同的标题元素。所以我想知道清理这些样式的最佳方法是什么......

h4 {
    color: red;
}

.archive h4 {
    color: green;
}

请记住，我已经在设计的其他地方使用了 h1 - h6 样式。

最好为此使用类，然后通过 mix-ins 继承样式（我使用的是手写笔）？

h4 {
    color: red;
}

.archive-header {
    color: green;
}

当我这样做时，为什么 csslint 会对此发出警告？是否有性能影响？

Answer 1

1. 要解决这个问题，当然……您的解决方案应该可以正常工作。
2. CSS Lint 警告不要这样做，因为您不应该以不同的方式设置相同的标题。以下是article talking more about the subject 的一小段摘录：

   在设计标题（或其他任何东西）时，我们希望实现三个大目标：

   1. DRY – 不要重复自己。我们希望设置标题一次，并且永远不会（好吧，很少！）重复那些字体样式或选择器。这将使我们的网站更易于维护。
   2. 可预测 – 无论标题放在页面的哪个位置，标题看起来都应该相同。这将使创建新页面和内容变得更加容易。
   3. 保持低特异性和尽可能简单的选择器。这将有助于提高性能，并防止网站随着时间的推移变得越来越复杂。

3. 没有性能影响。如果有的话，甚至可能是better 使用类名而不是标签。你提出的方案几乎是how to make your website faster by Google的教科书推荐。