いつも良質なエントリーでブックマークをたくさんもらっている「ウノウラボ Unoh Labs」。
若干前になりますが、そこで「CSSによるデザインワークと相性のよいHTMLって？」というエントリーがありました。
ここにたくさんのことが書かれておりますが、本日はさらに僕が実践していることを紹介したいと思います。

と言っても、まずは「CSSによるデザインワークと相性のよいHTMLって？」の内容の概略から。

ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように

特に説明するまでもなく、要素の役割に応じてID・クラスを適切に付けようねということですね。

同じようなものには同じクラスを割り振る

良く、「IDだけを振っておしまい」と言う状況がありますが、さらに同じような役割の要素にはクラスも設定しておきましょう、ということです。

tableのtrごとに「odd」「even」

1行おきに背景色を変えるなどのことが出来るようにするためです。

リスト系要素（ul,ol,dl)の最初と最後が特定できるようにしておく

最初だけ余白を大きくしたいなど、何かと必要になることが多いためですね。

h1～h6タグ直下には<span>か<a>タグが必ず入るようにしておく

装飾する機会の多い要素なので、何かと使える要素があると重宝しますからね。

と、こんな感じのことが書かれておりました。

さらにパッと思いつく所では、

• 現在のページに対するa要素へは、「.current」というクラス名を付けておく
• さらに現在いるカテゴリトップへのa要素へは、「.current-category」というクラス名を付けておく
• pdf へのリンクとなっているa要素へ、「.pdf」というクラス名（その他のファイルも同じくファイル名のクラス名）を付けておく
• 外部リンクとなっているa要素へ、「.external」というクラス名を付けておく

などが上げられます。
a要素ばかりの例を明示しましたが、例えばpdf へのリンクや外部リンクであれば、それらを明示するためのアイコンを背景画像として表示したいということが良くあることでしょう。

さらに、HTMLの作り方を工夫すると、もっと柔軟性の高い「相性のよいHTML」が出来上がります。
見出しが出現する度に、divをもうけて、「.section」などのクラス名を付けておくというものです。
つまり、h2・h3要素などが出現した場合ですので、以下のようなHTMLになります。

<div class="section">
<h2>見出し2</h2>
<p>段落</p>

<div class="section">
<h3>見出し3</h3>
<p>段落</p>
<!-- /.section --></div>

<!-- /.section --></div>

このようにすることで、例えば、装飾目的に左右にフロートさせた画像が、次のセクションに食い込むのがいやだね、ということであれば、CSS側で、

.section {　overflow: hidden;　}

とでも記述すれば一括して管理できるようになる訳です。
また、大見出し以下の内容は、見た目的にも大見出しにぶら下がっている内容なんだよ、ということを明示するために、左側に20px程度の余白を指定してインデントを付けようということであれば、

.section {　margin-left: 20px;　}
.section .section {　margin-left: 0;　}

とすれば、やはり一括して管理することが可能となります。

また上記の例では、「.section」に対して指定した内容を、さらに子要素の「.section」で打ち消すために、「.section .section」という子孫セレクタを利用しています。この記述をもっとスマートにしたいということであれば、「.section」に対して、見出しレベルに沿った連番を付けてあげると良いでしょう。
先のHTML例を、

<div class="section-lv2">
<h2>見出し2</h2>
<p>段落</p>

<div class="section-lv3">
<h3>見出し3</h3>
<p>段落</p>
<!-- /.section-lv3 --></div>

<!-- /.section-lv2 --></div>

とでもしておけば、「.section-lv3」のように、必要なdivをCSSで選択することが可能となります。

もっと突っ込んで「CSSによるデザインワークと相性のよいHTML」という観点から考えてみると、さまざまな所で既に言及されていることではありますが、body要素へのID・クラス属性の指定が上げられます。
最近の僕の傾向ですと、IDとしては、ドメイン名（当ブログであれば、i81-co-jp-koba）を、クラス名にはディレクトリ名（+必要があればページ名）を付与するようにしております。（とか良いながら、実際には「i81-co-jp-koba」はclassだったりするのですがｗ）
body要素へのID・クラス属性の指定により、CSSシグネチャと呼ばれていることが可能になります。つまり、「body.company ul { … }」などのセレクタを利用することで、属するカテゴリ内だけの何かをCSS側から選択出来たりするようになる訳です。

最後に、これらのID・クラス名は必要・不必要に関わらず一貫したルールに則って記述していくことが大切です。
つまり、OKとなったデザイン案を実装するにあたり、これらのID・クラス名を必要としない場合でも記述することが必要とうい訳です。
案件を進めていく過程で、どうしても「やっぱりこういう風に出来ないかな？」というクライアントからの要望は必ずと言って良いほど出てきます。おそらく皆さんもそんなご経験があることでしょう。
そんなときに、今回紹介したID・クラス名さえ記述しておけば、CSSファイルにほんの数行の記述をするだけで対応できたのに、というケースは多々あります。

もともと、Web標準ということが叫ばれる際には、「文書構造と表現の分離」というキーワードが必ず言って良いほど登場します。しかし、実際には1つのデザインのために作られたHTMLに、全く手を加えずにデザインを大きく変更することの出来るというケースは僅かしかありません。
「マークアップを行う人のちょっとした配慮があれば出来たのに…」ということが無いように、出来る限り「CSSによるデザインワークと相性のよいHTML」を目指していきましょう。

※中村亨介さんが提供するJavascriptライブラリ「yuga.js」を利用すると、「tableのtrごとに「odd」「even」」や、「リスト系要素（ul,ol,dl)の最初と最後が特定できるようにしておく」などのことをJavascriptによって制御することが可能となります。マークアップを行う人にとっては、とても便利なライブラリですので、まだ知らないと言う方はチェックしておいた方が良いかもしれません。