css - 哪个 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，因为它需要更少的代码行。另一方面，我认为重新定义颜色属性会导致浏览器重新绘制。

score 2 · Accepted Answer

我会使用 3 个 CSS 声明，这样你就不会做任何覆盖或复制属性：

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

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

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

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

score 1 · Accepted Answer

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

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

#title-question{
  color:red;
}

#title-answer{
  color:red;
}

然后使用：

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

4 回答 4