css - 编写重复 CSS 代码的正确方法是什么

Question

在我的整个网站中，有多个地方我希望我的文本是彩色的#f00

如果我想针对他们，我是否应该做出一个声明来同时针对所有内容，例如

a, .color, h2 {
  color: #f00 
}

或者，当我以它们为目标时，我是否应该为它们“着色”，例如

a {
  padding: 5px;
  color: #f00;
}

.color {
  background: #333;
  color: #f00;
}

h2 {
  font-size: 20px;
  color: #f00;
}

我永远不确定该做什么，当然，这个实例中的第一部分看起来代码较少，但后来我引用的标签比我需要的要多。但另一方面，我使用了 3 次 color: #f00 而不是一次。

我很欣赏两者都不是“错误”，我只是想知道是否更快、更语义化或什么。

注意:这不是我在任何站点中的代码，只是一个快速模型。我正在寻找更大范围的答案

Answer 1

第一种是首选方法。通常，开发人员的目标是最小化 CSS 大小以鼓励更快的加载。由于将这些类组合在一起，您的第一个示例肯定会占用更少的空间。