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)将更加快速.

另外,看到这个.