Question

在我的网站中说，有多个地方我希望我的文字被着色#f00

如果我想要定位它们，我应该做出一个声明来立即定位所有内容，例如

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

或者，当我瞄准它们时，我应该“着色”它们，例如。

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

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

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

我不知道该做什么，当然，这个isntance的第一部分看起来更少代码，但后来我引用的标签超出了我的需要。但另一方面，我使用color: #f00 3次而不只是一次。

我感谢他们都不“错”，我只是想知道一个人是更快，更语义还是什么。

注意：这不是我在任何网站上的代码，只是一个快速模拟。我正在寻找更大规模的答案

Answer 1

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

Answer 2

我认为这主要是一种风格选择，但我会告诉我如何处理它。

如果所有这些案例都有共同点意味着它们应始终具有相同的颜色，那么将它们组合在一起。

然而，如果他们有共同点，那表明你应该给这个共性命名，并使它成为一个类名。然后将样式分配给类。这是很好的模块化。

如果它们是偶然的，它们具有相同的颜色，并且您可能在不更改其他颜色的情况下更改它，请使用第二种形式。

希望的答案是正确的，但除非有这么多样式，否则我怀疑它会对装载时间产生明显的影响。

我还没玩过LESS，我想知道它是否会自动优化。

Answer 3

第一个选项应该是最好的，在某种意义上说，如果你编写更少的代码，并且如果你想在任何地方将这种颜色改为另一个，那么你将只需要改变一行。

但最后，使用第二种方法更有用。

如果您仍想在任何地方更改此颜色，最简单的编辑器将允许您轻松地执行此操作。但是如果你想改变一个div的颜色，你需要移动你的代码。

一个好的做法（使用第二种方法）是引用主css文件顶部的所有使用颜色（在注释中），然后您可以轻松选择一种来搜索/替换所有匹配。