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; }
}

我知道我的例子有点不够充分，但我的问题是，这两者之间有什么区别？第二个例子有点长，但没有定义不应该属于的规则。

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

- gerky

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）会稍微快一点。

另外，请参见这里。

- mishik

---

稍微再加上40个"i"字母才更合适哦！不过回答很好。除非需要，否则不要过于具体。 - Bill Criswell

我知道在这种情况下，“one”和“two”类是不必要的，但让我们假设它们存在于特定性。我知道第二个覆盖的情况较少，并且不包括不必要的情况。所以我的问题是，哪一个更好？第一个更短，但它会生成不必要的规则，在任何情况下都会变慢吗？此外，这些示例仅用于说明，我询问生成的不必要规则，而不是指定父类。谢谢。 - gerky

在这种情况下，第一个更有意义。就渲染速度而言，它们是完全相同的，但第一个更容易维护。 - mishik

Answer 2

除非考虑到样式层次结构的原因，否则更简单的方法是直接编写如下代码：

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

- António Regadas