哪个CSS代码段更适合可维护性和性能

Question

我有2个代码段。

以下是代码段1：

#question-title-1 {
 cursor:pointer;
 color:blue;
 padding:10px;
}

#question-title-2 {
 cursor:pointer;
 color:red;
 padding:10px;
}

摘录2：

#question-title-1 , #question-title-2 {
  cursor:pointer;
  color:blue;
  padding:10px;
}

#question-title-2 {
  color:red;
}

哪一个更好，为什么？ 我更喜欢2因为它需要更少的代码行。另一方面，我认为重新定义颜色属性将导致在浏览器中重新绘制。

Answer 1

我会使用3个CSS声明，因此您不会执行任何覆盖或复制属性：

#question-title-1,
#question-title-2 {
   cursor:pointer;
   padding:10px;
}

#question-title-1 { 
 color:blue; 
}

#question-title-2 {
 color:red;
}

这是更多的行，但减少行不应该成为结构化CSS的主管。

Answer 2

对我来说，更好的是第二，也许，但我相信第三种选择是最好的：

#question-title{
  cursor:pointer;
  padding:10px;
}

#title-question{
  color:red;
}

#title-answer{
  color:red;
}

然后使用：

<div class="question-title title-question">

Answer 3

我会说第二个。而不是重复相同的代码。当有变化反映两者时，您只需更改一次。

Answer 4

第二种选择是最好的。这是因为就CSS而言，DRY方法总是更好，无论是可维护性还是性能。但是，在这个示例中（并且在大多数情况下，当您处理CSS时）性能增益实际上是微不足道的，因此您选择最容易维护的选项。