idやclassが無闇に増えていくのは好ましくない

CSSでデザインを施すために id や class が無闇に増えていくのは，あまり好ましくないと思っています。たとえば，ナビゲーション。

• ヘッダーにあるグローバルナビゲーション
• フッターにある補助的なナビゲーション
• サイドバーにあるナビゲーション
• メインコンテンツにあるページ内のナビゲーション

などは，ひとつひとつに異なる id または class をふらなくても

• div#header ul.navigation
• div#footer ul.navigation
• div#footer p.navigation
• div#sub ul.navigation
• div#main ul.navigation
• div#main p.navigation

という方法で，それぞれ特定できます。最低限，navigation という class がひとつあれば足りるということになります。それぞれのナビゲーションの働きを明確にするために，それぞれ異なる id または class をふることを否定するものではありませんが，必要以上に細分化しなくても大丈夫でしょう。

id，class は大きなブロックからふり，細部にはふらない

基本的に，id，class は大きなブロック（祖先要素）からふり，細部（子孫要素）にはふらない，という方針でやっています。

ページの更新や修正の作業は，リストアイテムをひとつ増やすとか，段落をひとつ足すとか，表に1行挿入するといった細部に関わるもの多く，一度決まった大枠を変更することはあまりありません。

更新のたびに，こうした細かいところに id，class をふっていくのは，あまり賢いやり方ではないように思うからです。コーディングした人とは別の人が更新するような場合は特に，ミスの原因になりやすいところです。

将来を見通して

IE6が疑似要素 first-child に対応していないために li に class="first" や class="last" をふる必要が出てくることもあります。しかし，アイテムをひとつ追加したいというとき，それが first より前だったり，last より後ろだったら，この属性を書き換えなければならなくなります。

IE6のユーザが減少していけば，この class はいずれ要らなくなるものでしょう。あれば，かえってメンテナンス性が悪くなります。

場合によっては，こうした事情を説明した上で class="first" を必要としないデザインに変更する，というのもひとつの方法だと思っています。

table の tr ごとに class="odd"，class="even" というのも同様で，もし，途中に1行だけ挿入するときは，それ以降の tr要素にある class を書き換えなければならなくなります。こちらも nth-child という疑似クラスが各ブラウザに実装されれば，class をふる必要はなくなります。

body要素に id と class をふる

body要素に id と class をふるようにしています。だいたい，id にはページ名，class にはカテゴリ名を入れます。

こうしておくと，あるページ（カテゴリ）のある要素を特定してデザインを施すことができます。FAQのカテゴリの各ページの見出しだけ，他のカテゴリとは違うデザインにしたいとか，求人情報のページの dl だけ，他の dl とは別にしたいというときに，

• body.faq div#main h3
• body#recruit div#main dl dt
• body#recruit div#main dl dd

とセレクタを記述します。

これで，HTMLファイル内に style要素や style属性でCSSを書くということや，特にその要素だけ別の id や class をふるといったことをせずにすみます。カテゴリごとに異なる色を使いたいときなども，CSSでの対応が楽になります。

コーディングの流儀は様々だけど

こうしたことを考えるうえで基準となっているのが次のようなことです。

• structure（構造）とpresentation（見栄え）がHTMLとCSSに分離できているか。
• 変更が面倒にならないか。メンテナンス性が低下しないか。
• 他の人が見ても分かりやすいか。

おそらくこれらは，コーディングの流儀や好みによって，様々な方法があるのだと思います。何が良い・悪いということでなく，そういうやり方もある，とご理解いただくのがよいと思います。

が，HTMLやCSSをいじる（書く）人たちの間で統一したルールがあるということが重要...という点は間違いありません。