0

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

如果我想针对他们，我是否应该做出一项声明以立即针对所有内容，例如

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

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

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

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

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

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

我很欣赏两者都不是“错误的”，我只是想知道一个更快，更语义化还是什么。

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

4

3 回答 3

5

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

于 2012-08-07T15:27:03.510 回答
2

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

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

但是，如果它们有共同点，这表明您应该为该共同点命名，并将其命名为类名。然后将样式分配给类。这是很好的模块化。

如果它们具有相同的颜色只是偶然，并且您可能会更改其中一种而不更改其他颜色，请使用第二种形式。

Hope 的回答是正确的，但除非有大量这样的样式，否则我怀疑它会对加载时间产生显着影响。

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

于 2012-08-07T15:32:27.183 回答
1

第一个选项应该是最好的，因为如果您编写的代码更少，并且如果您想在任何地方将此颜色更改为另一种颜色，则只需更改一行。

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

如果您仍然想在任何地方更改此颜色，最简单的编辑器将让您轻松完成。但是如果你想改变单个 div 的颜色，你需要移动你的代码。

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

于 2012-08-07T15:33:28.150 回答