CSSでidとclassを使い分ける話になると、昔よく出てきたのが「classよりidのほうが処理が速い」という話です。古い解説記事や昔の制作現場の会話で聞いたことがある人も多いと思います。
ただ、今のWeb制作では、その速度差を理由にidを選ぶことはほとんどありません。現在は、idとclassのわずかな違いよりも、CSSの書き方そのものや、DOMの大きさ、セレクタの複雑さのほうが実際の表示や保守に影響しやすいからです。
この記事では、「CSSはidのほうが速い」という昔の話はどこまで本当だったのか、そして今はどう考えるべきかを、実務目線でわかりやすく整理します。
昔はなぜ「idのほうが速い」と言われていたのか
昔この話が広まった理由は、idはページ内でひとつだけという前提があるからです。ひとつしかない要素なら探しやすいので、classよりidのほうが処理しやすいのではないか、という考え方です。
たしかに理屈だけを見ると、idは固有の目印なので、classより特定しやすそうに見えます。そのため、昔は「速度を意識するならidを使ったほうがよい」という話がかなり出回りました。
今はidとclassの速度差を気にしなくてよいのか
結論からいうと、今の実務では、idとclassの速度差を気にして設計を決める必要はほぼありません。
現在のブラウザは非常に最適化が進んでいて、単純に「idだから速い」「classだから遅い」といったレベルの差は、通常のサイト制作ではほとんど問題になりません。
体感できるような差になることはまず少なく、そこを気にするよりも、保守しやすいCSSを書くほうがずっと大切です。
今のCSSで本当に気にしたいのは別の部分
今のフロントエンドで意識したいのは、idかclassかではなく、もっと全体的な設計です。
- セレクタを長くしすぎていないか
- 不要に深い入れ子になっていないか
- DOMが大きくなりすぎていないか
- 再計算が重くなるような複雑な指定を増やしていないか
たとえば、単純なclass指定よりも、何段もネストした複雑なセレクタのほうが、あとから管理しにくくなりやすいです。実際の制作では、idかclassかの違いより、こうした書き方の積み重ねのほうが問題になりやすいです。
idを速度目的で使うと、逆に扱いにくくなることもある
idはCSSで使うと指定が強く効きやすいため、あとからデザインを調整するときに上書きしづらくなることがあります。これが実務ではけっこう厄介です。
最初は「固有だから便利」と思ってidで書いても、あとで別ページや別パターンを作るときに流用しづらくなります。さらに、調整のたびにより強い指定が必要になり、CSS全体がだんだん扱いにくくなってしまいます。
つまり、速度のためにidを選んだつもりが、結果として保守性を下げてしまうことがあるわけです。
今の実務ではclass中心が基本
今のWeb制作では、見た目やレイアウトはclassで作るのが基本です。classは再利用しやすく、複数付けもできるため、部品化や使い回しに向いています。
<button class="button button--primary">お問い合わせ</button>
<button class="button button--secondary">詳しく見る</button>このようにclassで設計しておけば、共通の見た目を持たせながら、色や役割だけを追加で変えることができます。実務でclass中心になるのは、こうした柔軟さが大きいからです。
idは今でも必要だが、使いどころが違う
もちろん、idが不要になったわけではありません。今でもidは大事です。ただし、主な役割は見た目を作ることではなく、固有の目印を付けることです。
たとえば、次のような場面ではidが向いています。
- ページ内リンクの飛び先
- ラベルとフォーム部品の関連付け
- そのページで唯一の要素を識別したい場合
<section id="access">
<h2>アクセス</h2>
</section>
<a href="#access">アクセスを見る</a>このように、idは固有の識別に使い、スタイルはclassで組むという分け方が、今の設計ではかなり自然です。
CSSでidが速いという話は、今では優先順位が低い
「CSSはidのほうが速い」という話は、完全な作り話というより、昔の考え方がそのまま残っている部分があります。ただ、今のブラウザや制作手法では、その差を理由にidを選ぶ意味はかなり薄くなっています。
実務では、ほんのわずかな理論上の差よりも、読みやすいこと、直しやすいこと、使い回しやすいことのほうがずっと重要です。そう考えると、今の時代に優先すべきなのは速度神話ではなく、保守しやすいclass中心の設計といえます。
まとめ
昔は「classよりidのほうが速い」とよく言われていましたが、今のWeb制作ではその違いを気にして設計することはほぼありません。
- 昔はidのほうが速いという話がよくあった
- 今はその差よりもCSS設計全体のほうが大事
- 見た目やレイアウトはclassで作るのが基本
- idは固有の識別やページ内リンクに使うのが自然
これからHTMLとCSSを書くなら、「速度のためにidを選ぶ」のではなく、「保守しやすいからclassを使う」という考え方のほうが実務に合っています。今の時代のCSS設計では、idかclassかの理論差より、扱いやすい設計にすることのほうがずっと重要です。
関連記事
