id の一意性と class の多様性

CSS において、id と class はどのように扱えばいいのでしょうか。

class 属性

class は擬似的に HTML 作者独自のタグを定義できると考えると良い。また、class 属性値は

<div class="sub content"></div>
<div class="main content"></div>

複数指定できる。CSS の指定は

div.sub.content {}
div.main.content {}

id 属性

id は一意でならなければならない。つまり、id 属性値は一つの HTML 文書に2回以上登場してはならない。

<div id="header">
<h1>headding 1</h1>
</div>

上記のように文書中に一度しか登場しない要素に id を割り当てる。ただし、多くの場合、class で実現可能なので、id を指定することに何らかの意味が無い以上は class を使用するのが望ましい。あるいは、

<div class="header" id="contentHeader">
<h1>Headding 1</h1>
</div>

とし、CSS の指定は class で行い、id の指定はより詳細な情報をマークアップしたい場合に使用する。