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

私にとっては 2 番目の方が良いかもしれませんが、3 番目のオプションが最適だと思います。

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

#title-question{
  color:red;
}

#title-answer{
  color:red;
}

そして使用する：

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

score 0 · Accepted Answer

私は2番目と言うでしょう。同じコードを繰り返さないでください。両方を反映する変更がある場合は、一度変更するだけで済みます。

score 0 · Accepted Answer

2 番目のオプションが最適です。これは、CSS に関しては、保守性とパフォーマンスの両方の点で、DRY アプローチが常に優れているためです。ただし、この例 (および CSS を扱っているほとんどの場合) では、パフォーマンスの向上はそれほど重要ではないため、維持しやすいオプションを選択します。

css - 保守性とパフォーマンスの点でどちらの CSS コード スニペットが優れているか