HTMLでclass名を細かく指定すべきかどうか

Question

HTMLでclass名を細かく指定するかどうかについて、ご指南をお願いします。

CSSの処理はセレクタを右から順に判別していくと聞きました。
例えば以下のようにすると、「全てのh3タグ」や「全てのliタグ」の中から判別することになり、CSSの処理速度は多少落ちると思います。
しかしコードはすっきりします。

<div class="list">
 <h3>リスト</h3>
 <ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
 </ul>
</div>

.list {
 /* style 1 */
}
.list h3 {
 /* style 2 */
}
.list ul>li {
 /* style 3 */
}

以下のようにすると、CSSの処理速度は多少上がると思います。
しかしコードの文字数は増え、見づらく感じます。

<div class="list">
 <h3 class="list-title">リスト</h3>
 <ul>
  <li class="list-item">項目1</li>
  <li class="list-item">項目2</li>
  <li class="list-item">項目3</li>
 </ul>
</div>

.list {
 /* style 1 */
}
.list-title {
 /* style 2 */
}
.list-item {
 /* style 3 */
}

コードを見やすくしたいという思いと、少しでも処理を高速化したいという思いがあっていつも迷ってしまいます。
皆さんはどうされているのでしょうか？
これと決まった答えでなくても構いませんので、ご意見いただけると嬉しいです。
ご回答よろしくお願いします。

Answer 1

セレクタの処理速度の観点からすれば、多少の処理差はほとんど誤差のようなものなので、
よほどシビアな環境を要求されるのでもない限り、私の場合は処理速度の面は無視します。

それよりclassをつけるかつけないかは、CSSの管理・運用・設計方針としてどうするのがベターか？
という観点から決めることが多いです。

よく言われるのが「流用・修正・保守のしやすさ」をどう担保するか、という点です。
作ったら作りっぱなしでほとんど修正・運用しないような場合はどうでもいいのですが、
そうでない場合にはHTML・CSSの「コンポーネント化」をして、流用・修正しやすいスタイル設計をしておかないとCSSは容易に破綻してしまいます。

OOCSS、SMACSS、BEMなどのオブジェクト指向のCSS設計では、上記の観点を非常に重視するため、
原則としてHTML要素に直接スタイル指定したり、idセレクタをスタイル指定に利用したりはしません。
スタイル指定は全てclassで管理し、そのclass名に厳格な命名規則を持たせて管理することを求めます。

ほぼ全ての要素にclassが付くことになるので当然HTMLソースコードは見づらくなりますが、
修正・更新などの作業で仮にHTML構造が変更になったとしても、CSSの修正はしなくても良いですし、
同じスタイルを持つパーツであれば異なるHTML構造であっても簡単に使いまわすことができます。
要はCSSの使い勝手、管理がしやすくなるんですね。

なので、要は「何を重視するか」によって、id・classをどのように使い分け、つけるのかの方針は変わってくるかと。

ちなみに私の場合はオブジェクト指向考え方は参考にしつつ、割と緩いルールでやってます。

・レイアウトの大枠部分にはidをつける。
・それ以外のコンポーネントには原則全てclass
・コンポーネント内の細かいパーツにも原則classをつける。ただし、ul>liなどのようにHTMLの仕様で構造が確実に限定されるようなケースではわざわざclass名は付けず、 .list liのような子孫セレクタは許容する

↑こんな感じで。

Comments

[neotk]

ご回答ありがとうございます。
通常は処理速度の差はほとんどなく、設計・管理のしやすさやコードの再利用を考慮して決めるのですね。
目的に応じてルールを決めようと思います。
ありがとうございました。

Answer 2

自分の場合は、以下のようにすることが多いですね。

<div id="menu"> <!-- idにして、list のように広義の単語ではなく、役割として狭義の単語を使用 -->
 <h3>リスト</h3>
 <ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
 </ul>
</div>

#menu h3 {
}
#menu li {
}

class でセレクタを指定した場合、要素の探索はドキュメントの末尾まで行われるのに対し、IDは見つかった時点で、探索を終了する。（JavaScriptの場合は）
ただし、CSSの場合、重複したIDを設定しても、CSSが適応される事実から見て、ドキュメントの最後まで探索しているようです。

ですので、自分の認識としては、

CSSの処理速度は多少上がる

というより、「さほど変わらない」という認識です。

ですので、HTMLには極力、不要なidやclassは使わない方法で書くようにしています。

Comments

[neotk]

ご回答ありがとうございます。
通常は処理速度の差が無視できるレベルということがわかって良かったです。
また、IDとClassの探索方法の違いは初めて知りました。だからIDのほうが高速と言われるのですね。
ありがとうございました。

Answer 3

現実問題として、「CSSを当てるべきHTML要素を探すのにかかる時間」なんていうのはほぼ無視できる程度ですし、ましてや書き方を変えたことで節約できる時間は1ミリ秒あるかないかです（実験結果）。

「もうそこしか残っていない」ぐらいにチューニングした環境なら別ですが、そうでもないなら書きやすさを崩してまで「最適化」する必要はないと考えます。

Comments

[neotk]

ご回答ありがとうございます。
通常は処理速度の差が無視できるレベルということがわかって良かったです。
また、具体的な実験結果を示していただきありがとうございました。