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

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

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

score 6 · Accepted Answer

为什么不简单：

.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

关于您的标记 - 根本没有区别，除了第一种情况（没有.oneand .two）会更快。

另外，请参阅此。

score 3 · Accepted Answer

除非出于样式层次结构的原因，否则编写起来更简单：

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

2 回答 2