これはなかなか根の深い問題だ。オレもCSSを習得しようと思つた際に、クラスとIDの違ひを把握するのにまづ躓いた記憶がある。なぜ躓くかといふと一見同じ機能を満たしてゐる様に見えるからで、それは結局「見映えのためのテーブルレイアウト」「文字を大きくするためのH1〜H6タグ」と同じ病にかかつてゐることを理解するのに時間がかかつた。
以下は仕様書的に正しいかどうかわからないオレ見解にすぎないけれども、CSSを定義する目的としてid属性を用ゐるのは良くないと思ふ。
まづid属性についてはその言葉の通り、個々の要素に固有の識別子を与へるために用意された属性であるはず。例へば今日の日付の日記を囲むdiv要素に<div id="diary20040413">と定義するためにある。当然一つの文書の中に同じid="diary20040413"といふ属性は仕様上与へられないし、そもそも与へるべきではない。さらに言へば、一かたまりの文書群の中に同じIDが存在するのもよくないと思ふ。ある要素の唯一性を保証するためにあるのがid属性といふわけだ。
対してclass属性は例えば日記本文に<div class="diary">、コメント部分には<div class="comment">などと定義することで、同じ要素でも用途に応じて区別するために与へられる属性だ。CSSをクラス毎に定義してやれば、同じ要素でも全く違つた見映えを提供することができ、また同じクラス名の要素の見映えを統一できる。
その使用目的からいつて、一般的にCSSを定義する様な局面においてはクラスによる振分けをしておけば十分なはず。IDで振分けても見た目の結果は同じだが、一度きりしか使はれるはずのないものを定義するのは無駄とも言へる。もちろんある一要素だけ際立たせる必要があるときは別だが、それは特殊なケースだと心得ておくべきだらう。
仮にすべての要素にIDを振る場合でも、それはCSSの定義のためではあり得ないはずだ。例へば日記本文に毎日別のIDを与へなくてはならない場合でも、下記の様にするのが望ましいと思ふ。
<div id="diary20040413" class="diary">
4月13日の日記
</div>
<div class="comment">
[本日のツッコミ]
</div>
<div id="diary20040412" class="diary">
4月12日の日記
</div>
<div class="comment">
[本日のツッコミ]
</div>
<div id="diary20040411" class="diary">
4月12日の日記
</div>
<div class="comment">
[本日のツッコミ]
</div>
HTMLの方でこの例の様にclassとidを別々に定義して、CSSの設定はclass属性を使つて振り分けてやるべきだらう。よほどのことがない限り、CSSの設定にIDの出番はないはずだ。
追記
先述のGoogle検索結果の最上位にある、某方面として有名なPiroさんの解説。オレがくどくど書いたことをごく簡潔に分りやすくまとめられてゐるので、こちらを読めば良いと思つた。
同じくGoogle上位から、悪い解説の例。ブラウザがどう解釈するかといふ視点でしか考へてゐないために、結果として目的もきちんと果たせてゐない。といふか。
ブラウザNNでは最初の一文字に数字を使うと正しくは表示されないようです。注意してください。
仕様書嫁‥‥orz
