A - 子孫要素の末端にclassをふるマークアップ

こんなふうなマークアップをかつてしていたことがあります。

<div class="box1">
  <h3 class="h-pattern1">注意事項</h3>
  <p>更新する際には次の点に注意してください。</p>
  <ul>
    <li class="mark1">......</li>
    <li class="mark1">......</li>
    <li class="mark1">......</li>
  </ul>
</div>

.box1 {......}
.h-pattern1 {......}
.mark1 {......}

発想としては，box1で枠や背景色を入れる。h-pattern1で見出しの装飾。mark1でリストマークに画像を入れる。それで，これらはそれぞれ他のところにも使い回しができる。いろんなパーツを用意し，それらを組み合わせてデザインしよう。というふうなことなのです。

B - 祖先要素にclassをふるマークアップ

しかし，最近はこんなふうにマークアップしようと心掛けています。

<div class="attention">
  <h3>注意事項</h3>
  <p>更新する際には次の点に注意してください。</p>
  <ul>
    <li>......</li>
    <li>......</li>
    <li>......</li>
  </ul>
</div>

div.attention {......}
div.attention h3 {......}
div.attention ul li {......}

この部分を「注意事項を示すボックス」として位置づけ，その中の見出し，リストにデザインを与える。というふうな発想でしょうか。

リンクのリストならdiv class="attention"をdiv class="link-list"にして，

div.link-list {......}
div.link-list h3 {......}
div.link-list ul li {......}

とリンクリスト用のボックス，見出しやリストマークなどをデザインする。手順を示すリスト，具体例を示すリストなど，リストの内容にあわせてデザインする。

デザインと役割・意味を結びつける

マークアップとしては，Bのほうがスッキリと分かりやすいと感じます。装飾のために余計なclassをふることもありません。無理・無駄のないマークアップです。

文脈の中で何かしらの役割を担っているから枠をつけるわけです。例を示す，引用する，重要事項を示す，脚注など。そのボックスの役割・意味に対して，形や色をデザインする。

list-style-imageを指定するときもそうです。リンクのリスト，注意事項のリスト，手順を示すリスト，具体例のリストなど，リストの役割・意味にあわせてボックスがデザインされ，その中のリストマークがデザインされる。

Bのようなマークアップをしていくと，役割・意味が同じところには同じデザインが与えられることになります。「こういうデザインのところには注意事項が書いてある」「こういうデザインならページの概要が書いてある」というふうに，デザインと，その部分の役割・意味を結びつけるルールができていきます。このルールは，読者の理解をたすけることにつながるはずです。

内容 → 論理的に構造化する → 視覚的にデザインする

と書くと，Web標準の考え方そのままですが，表現のひとつの手法として重要なことだと思います。この順序が入れ替わっていたり，「論理的に構造化する」部分が曖昧になっていたりするために，制作がうまくいかなくなるのかもしれません。つまり，論理的構造化が後からこじつけたようなものになったり，デザインが感覚的なものに頼らざるをえなくなったり...。

文書を論理的に構造化するのが，HTMLやXHTMLを含むマークアップ言語。コーダーだけでなく，ライターやデザイナーも，この言語の目的や用法を正しく理解しておく必要があるかな，と思ったりします。