先般人気記事になった「最初に指定しておくと便利なCSS 」のはてブのコメントを見ていて、確かにclass=”hidden”などは、「htmlは文書構造を示すものなので、class名が視覚的な内容を示すものは好ましくないと思いますよ。class名にredとかblackとか付けているのと同じ」だと思いました。ただ、便利なので止められないし、結構使っているサイトもあったりするので、「Web標準じゃないけど、いいか」と思っていました。

ところが先日、 個人的に勝手に私のCSSの師匠（？）と思っている大藤幹さんが、

多くのサイトでは、このハックが必要となる要素に対して「clearfix」というクラス名をそのまま追加指定して使用していることが多いが、それではXHTML側に表示に関する指示を組み込むのと同じだ。クラス名はハックと切り離して考え、構造的にその要素にふさわしいものを指定し、その名前をハックのセレクタ部分で指定するようにしよう。

出典：Web Designing 2007年4月号 p115

と書いていらっしゃるのを見て、ごもっともと思ったと同時に、このことについて考えてみたくなりました。というのも、私がclearfixを記事にしたとき、同氏の本「スタイルシート　サンプル＆リファレンス」の「ボックスの最後でfloatをクリアする」というサンプルを参考にしたからです。そこではclass名に「clearfix」を使っていました。

「構造とプレゼンテーションの分離」の前提

構造（structure）とプレゼンテーションの分離は「そうしようとする」ことを前提とします。構造とプレゼンテーションについてはW3CのWeb Content Accessibility Guidelines 1.0を参照してください。また、ここでは「idを使用するかclassを使用するか」という議論は別の機会にすることとします。

文書は、適切な構造を表す要素でタグ付けし、見栄えなどの表示方法を制御するためには、表示を制御するための要素や属性を使用せずに、スタイルシートを利用する。

Class名はsemantics（意味論、記号論）に配慮して付ける

Class名に”red”とかはまずいです。W3Cの”Use class with semantics in mind - Quality Web Tips“によれば、

良いClass名
“warning”, “important”, “downloadableImage”, “submenu”は良い名前です。これらはその要素が意味することを説明しており、変えることはなさそうです。”warning”は見た目がどう変わろうとwarningでしょうから。

悪いClass名
“border4px”, “lighttext”,”prettybackground”は悪い名前です。borderは5pxにするかもしれないし、backgroundはしばらくすれば「pretty」じゃなくなるかもしれません。lighttextをCSSでdarkなtextに変えたら、HTMLのClass名もdarktextに変えたくなるでしょうし、その際に漏れが発生しそうです。

となっています。要すれば、

CSSが適用されなかったとして、それでも意味を持っているか？

という事だと思いますが、いかがでしょうか？

ちなみに最新のCSS3のCSS3 module: W3C Selectorsにおけるclassの説明箇所ではclass=”pastoral blue aqua marine”という例が（正しい使用法として）出てきます（笑）。

微妙な例

微妙だと私が思うのは以下のような、実際のCSSで見かけるClass名です。

1. “oddline”,”evenline”,”lastline”
2. “flex”
3. “thumbnail”
4. “noprint”
5. “priority1″
6. “hide”

あまり沢山は思いつきませんでした。すべてCSSでどうにかすることを前提にしてClassを付けているという意図において、表現に関するClass名ではないでしょうか。

例えば”oddline”,”evenline”は良くある、奇数行と偶数行で交互に背景色を変えて見やすくするためだと思われます。現状（CSS2.1では）Class名を付けずにCSSで交互に背景色を指定することは簡単ではない（？）でしょう。なので、このClass名は肯定され得ると考えます。また”oddline”は構造的な意味を表していると考える人もいるでしょう。

class=”hide”というのは完全に表現に関する指示になるのでよろしくないということになるかと思いますが、構造上、読者に見せるつもりはないという意味(semantics)も成り立つのではないかと思えてなりません。

問題のclass=”clearfix”について

例えば、（HTML）文書に「左図のように、．．．」と書いてあるとき、厳密には「CSSはユーザー側でも変えられるから必ずしも左に図があるとは限らない」となり、従ってこの文章がよろしくないということになるのでしょうか。だとすれば、「以下のように．．．」「次の．．．」も同じようによろしくないということになります。しかし、「左に図がある」ことを意図するため、その図の要素にclass=”alignleft”と記述することはsemanticと言えなくもない？と思うわけです。

同様にclass=”clearfix”は、floatしている要素があって、そのブロックでclearしたい、しなければ（HTMLに）書いてあることが正しく理解できない、ということを表すために使用するなら良いような気がします。

理屈上はclearfixすることを前提としてHTMLを記述するのがいけないのです。わかってます。本音は、要するに（class=”clearfix”などは）便利なので、これから出てくるであろう、「これは悪」みたいな風潮を出来るだけ「ゆるく」したいだけなのです