CSSでよく使う装飾定義をclass名でまとめることについて

2xup.orgのCSS でよく使う装飾定義をコンポーネントとしてまとめるという記事を読んだのですが、挙げられているHTMLの例を見てみて、「いやいやその方向性は無しでしょう」と思ったのでした。何故かといえば、

という書き方をしていたので。それはつまり「文字を赤くしたいので <span class="red">文字</span>」というのと同じなのでは。

* * *

記事では、

見た目を意識しすぎてしまっているのが気になるので class の名前を変更したり、

とも書かれているのですが、単にclass名を変更するだけでは状況は大差ないような気がします。問題は、「よく使うスタイル定義の組み合わせ」をコンポーネントとしてまとめるのはいいとしても、それを或る一つのclass名に集約することなのではないかと思います。

HTMLのclass属性はスタイルシートのセレクタとしても利用されますが、より汎用的には、要素を分類するためにあるものだと考えます。なので、class名を付けるときは見た目に則したもの則して名前をつけるのではなく、「文書中でどのような役割を持つのか」という文書構造に則した即して名前をつけるべきかと思います。

例えば、「リスト項目をインライン表示し、項目と項目の間は1文字分空ける」というスタイル定義を

{
  display:inline;
  margin-right:1em;
}

という風にまとめるとするならば、これに .inline というセレクタを対応させてHTML文書にも class="inline" を書き加える……のではなく、まずclass付けは文書の構造に則して行い、そうして出来たHTML文書から、インライン表示させたいリストを選択し、

ul.booklist li,
ul.movielist li,
ul.disclist li,
ul#navigation li {
  display:inline;
  margin-right:1em;
}

とスタイル定義にセレクタを対応させるのが、本来の順序ではないかと思うのです。

* * *

似たようなことを、先日CSS Nite Vol.16を観に行った時にも考えていたところでした。

鷹野雅弘さんのプレゼンテーションではCSSのテクニックをいくつか紹介しており、その中で、floatさせたボックスが親ボックスからはみ出るのを防ぐための方法も扱っていました。Web製作業界?においては、このテクニックはclearfixという名で知られているようです。

自分も以前にこの問題を考えたことがあった(子にフロートボックスを含む時の親ボックスの背景)ので興味深く拝見していたのですが、実装の例として

<div class="clearfix">
  <!-- 親のボックス -->
  <div>
    <!-- floatされる子のボックス -->
  </div>
</div>

のような(正確には覚えていないのですが)HTMLソースを出したところで「ちょっと待て」と思ったのでした。「説明としてはそれで分かり易いのかもしれないけど、実際のHTMLでそんなclass名を使うんだったら、<br style="clear:both" /> を親ボックスの末尾に入れる方法と大して変わらないではないか」と。鷹野さんは「HTMLをクリーンに保つ」ということを機会あるごとに言われていた方だったので、その挙げられた例が意外だったのでありました。