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

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

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

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 .