CSS重复规则最佳实践

Question

假设我有这样的HTML，我使用LESS：

<div class="one">
  <p class="a"></p>
  <p class="b"></p>
</div>
<div class="two">
  <p class="a"></p>
  <p class="c"></p>
</div>

我想要用红色标注段“a”，用蓝色标记“b”，用黄色标记“c”。所以我有以下内容：

.one, .two {
  .a { color: red; }
  .b { color: blue; }
  .c { color: yellow; }
}

我知道它也可以写成：

.one {
  .a { color: red; }
  .b { color: blue; }
}

.two {
  .a { color: red; }
  .c { color: yellow; }
}

我知道我的例子有点缺乏，但我的问题是，两者之间的区别是什么？第二个例子有点长，但没有定义它不属于的规则。

所以我的问题是放置一些没有意义的规则来保存一些行的缺点是什么（就像我在第一个例子中所做的那样）？它会产生更多规则，使它变慢等等。

Answer 1

为什么不简单：

.a { color: red; }
.b { color: blue; }
.c { color: yellow; }

这两者之间的区别在于，第一个涵盖所有六种类型：

.one .a, .one .b, .one .c, .two .a, .two .b, .two .c

虽然第二个只涵盖4：

.one .a, .one .b, .two .a, .two .c

关于你的标记 - 没有任何区别，只有第一种情况（没有.one和.two）才会更快。

另请参阅this。

Answer 2

除非出于样式层次结构的原因，否则只需编写：

  .a { color: red; }
  .b { color: blue; }
  .c { color: yellow; }