id名、class名は意味のある名前をつける

id名やclass名を考えるのは結構億劫ですよね。だからつい適当に思いつきで命名しがちです。しかし、後々のメンテナンスや他の人がソースコードを変更することを考えると、id名やclass名は慎重に決めましょう。

例えば、強調のstrongタグで囲んだテキストを赤くしたいときを考えます。安易に

CSSコード

strong .red {
   color:red;
}

にしてしまうと、後々に赤色でなくて緑色に変更しなければなくなったとき、redというclass名は非常に不適切になってしまいます。

よって、色でclass名を決めるのではなく、機能でclass名を決めるべきです。機能という面では｢強調｣ですが、strongにはすでにその意味は含まれているので、二重に命名することに意味はありません。そのような場合は、囲んでいるテキストの中身で命名します。

例えば、

(X)HTMLコード

strongタグの使用は<strong class="seo">SEO</strong>に効果的です。

のように命名するのもひとつの手です。

しかしながら、色が赤であることが重要ならば、そういう機能としてclassを指定するのなら、｢class="red"｣という命名も正しくはあります。このあたりは、ケースバイケースになりますね。

また、マークアップには直接関係しない要素、例えばワイヤーフレームのためのdiv要素などには役割的な名前をつけるべきです。

ヘッダー部分を囲むdiv要素には｢<div id="header">｣、メインコンテンツを囲むdiv要素には｢<div id="mainContents">｣といった具合です。

こうすることで、CSSだけを見てもどのようなHTMLタグの指定なのかよくわかり、メンテナンスもしやすくなります。