カラクリ.jp

CSS で class を使って id を使わない理由

投稿日
更新日
CSS のイメージ。

CSS セレクタには class を使い、id を使わないほうが良い、とされるコーディング理論があります。 ここではその理由についてまとめておきます。

再利用性・汎用性の低下

id セレクタは再利用性や汎用性を低下させるので、積極的に使うべきではないとされています。 id はページで 1 度しか使われないですから、再利用される頻度が低い、ということです。

汎用性の高い装飾

まず、あるページの "コンテンツ" や "テキスト" の装飾のために id を使うべきではありません。 言い換えれば、たとえページに 1 つしか存在しない要素を装飾するためであっても、汎用性の高い装飾なら、class にするべきです。

コンテンツやテキストはページに複数回登場する可能性があります。 単純な装飾は繰り返し使えるようにしておきます。

#unique-text
{
    font-weight: bold;
    font-family: serif;
    text-decoration: underline;
}

.emphasized-text
{
    font-weight: bold;
    font-family: serif;
    text-decoration: underline;
}

汎用性が高い装飾の例(極端な例)

汎用性の高い class は異なる別の Web サイトへ使い回すこともできます。 名前や設定内容の重複を確認する都合上、必ず使い回せるわけではありませんが、 ページの本文や主たるコンテンツの装飾は、多くのサイトで使うことができるでしょう。

当てはまらないケース

例えば id="content" など、ページをレイアウトする要素に id が与えられるケースはよく見られますが、 この場合には再利用性は(あまり)関係ありませんね。

むしろ id="content" が与えられた要素を装飾(レイアウト)するために class を追加する方が、 余計な情報を付与して冗長なコーディングになる気がします。

たとえページのレイアウトのためであっても、id を使うことで別の異なる Web サイトのコーディングに使い回しにくい、ということはあります。 あるレイアウトのために与えられた id 名が、同じようなページレイアウトのために使われているとは限らないためです。 例えば content のように抽象的な内容の場合には、ページ全体のどの部分であるかは定かではありませんね。 しかしながら、この場合は class であっても使い回すことは難しいので、大きな欠点にはならないように思います。

設定の優先順に関わる理論

CSS セレクタの優先順位は、概ね次のようにされています。 また、ブラウザは並列されたセレクタを右側から解釈し、優先順位が等しい場合には、新しく定義された設定を優先します。 (CSS ファイルのより下部に書かれた設定を優先する)。

  1. !important
  2. inline(インライン / HTML 埋め込み)
  3. id
  4. class
  5. element(要素)
  6. Universal(* / 全称セレクタ)

設定の上書きを容易にし、可読性を高める

優先順位の通り、id で定義された設定は class によって上書きすることができません。 したがって、特定の条件を満たす場合にのみレイアウトを変更するなどの場合に、 id で定義された設定を上書きできない場合があります。

多くの場合には、そのような時には、セレクタを工夫するか、やむを得ず id を追加することになります。 ただし、子孫セレクタはパフォーマンスを低下させる原因になることが知られていますし、 不用意に id を追加することは、ページと設定ファイルの冗長さを増し、可読性の面でも良くありません。

もしすべての設定が class で定義されているのであれば、上書きできないケースは極めて少なくなります。 設定の上書きのために余計な要素やセレクタを追加する必要がありません。

わずかにスタイルを修正するような状況では、class のみで定義することは大いに有効でしょう。 CSS ファイルを遡って全体の定義を確認することなく設定を上書きすることができます。

id は堅牢さに利点がある

プログラミングにおいては、バグを防ぐために、親のシステムの一部をその子のシステムから変更できないようにするコーディングが求められます。 Web サイトのマークアップにおいては id がこの役割を担うことができます。

先の通り、id は class によって設定が上書きされませんから、class によって設定される限りは、id で定義された設定は絶対に変更されません。 例えば、一般にはページ全体のレイアウトは崩れてはいけないものですから、そういった場面で id を活用することは考えられます。

描画の高速化のため

昨今の Web ブラウザ(とデバイスのスペック)では、極度に考慮する必要はないとされていますが、 描画の高速化のために id を使うべきではない、というコーディング理論があります。

class セレクタによって装飾された対象が、それより下部にある id セレクタによって再度装飾される場合は、設定が上書きされます。 いくつかの要素が再描画される程度であればこの問題は無視することができます。

しかしながら、例えば、レイアウトに関わる装飾の場合は、再度レイアウトをやり直し、その要素の子要素を再度描画することになります。 そのようなケースの場合には、ページの描画は遅くなってしまいます。(リフローやリペイントが発生する、という類の問題です)

昨今の Web ブラウザでは解析を行い、可能な限りページのレンダリングを最適化しているとされます(レンダリングの回数を減らすなど)が、 解析にも負荷がかかりますし、高速に描画するためには、このような仕様を理解しておく必要があります。 コーディングの時点で回避できる問題は、可能な限り回避するべきです。

走査手順の短縮

class 以下のみで構成されるページの場合には、id から設定情報を順に走査しないために、多少の高速が見込めるようです。 ただし、これについては定かではありません。具体的で信憑性の高いソースが見当たりませんでした。理屈は理解できますが。

id の方が先に読まれるなら高速なハズ

id の方が class よりも優先順位が高い、のであれば、id を使った方が描画が高速化されるはずである、という考え方があるようです。 確かにその通りでしょう。検索すれば検証した例もいくつか見つかります。

しかしながら id は全体のレイアウトのために使われることの方が多いですし、その数は決して多くないでしょう。 高速化によるパフォーマンス改善の程度と、class にすることによって得られるメリットを比較すると、 それ程に大きなメリットには見えない気がします。

結論

id は可能な限り使わないこと。ページ全体のレイアウトのためには使っても良いが、 CSS ファイル内の上部に定義し、リフローやリペイントが発生しないように注意すること。

Reference