Webエンジニア susumuis の技術ブログ

このブログの内容は個人の見解であり、所属する組織の公式見解ではありません

HTMLとCSSの棲み分けについて

前のエントリで、HTML5とCSS3の現代的な棲み分けとして、

div#container > div:nth-of-type(3) > div > aside p {
...
}

のような複雑なCSSセレクタを組み立てて、HTML側のマークアップは必要最小限のclassとdivを使った 美しいものとするという方針には「疑問がある」と述べましたので、そのことについての詳細と、ハンズオンの発表者:一條 美和子さんに伺ったことを書かせていただきます。

プログラムの世界では、連携には「密結合」と「疎結合」という用語が存在します。このブログは大半がプログラマーに読まれているはずなので、ぴんとくる人がほとんどと思いますが、「疎結合」ということは、交換可能とほぼ同じ意味です。

今までの、HTML+CSSの書き方では、HTML側にclass属性やid属性を多様していました。

<div id="main">
hello, world <span class="number">2011</span>
</div>

こんな感じですね。このような形だと、HTMLがCSSに依存していると言えます。CSSから見たら、IDやclassという独自ルールの中で完結しているので、HTMLページとは疎結合です。HTMLから見ると、CSSにIDやclassを制約されてしまいますが、classは文字列に過ぎないので、ゆるい密結合です。この形なら、一つのHTMLに対し複数のCSSを、逆に一つのCSSに対し複数のHTMLを割り当てることができます。

そのかわり、

ページのタイトルは必ずtitleクラスをつけること

などの制約をHTML側にかけることになります。この方法は、一種のテンプレートエンジンを作っていることになります。IDとclassを一定のルールに当てはめれば統一的なデザインフレームワークに落とし込めるという考えです。

もし、これとは反対に、HTML側にはclass属性やdiv、spanタグは可能なかぎり書かず、CSSセレクタでデザインを頑張ったとすると、そのCSSは、対象のHTMLに強く依存してしまいます。CSSから見たHTMLは密結合です。そのかわりHTMLはCSSに対してほぼ自由です。

このことのメリットは、HTMLが自由だということ。より、文章構造に特化することができ、CSSはデザインというふうに役割分担が徹底できます。デメリットはCSSに対するHTMLの交換ができないということです。極端に言えばページ一つ一つにひとつのCSSを書かなくてはなりません。

確かに、HTMLの本来の意味には正しいかもしれません。しかし、エンジニアリングの観点からすると、CSSファイルが複雑化し、CSSセレクタのトラブルも発生しがちですし(ページ書き換えたら崩れたなど)、複雑なCSSセレクタは処理が遅く、開発スピードも落ちるのではないかと危惧します。

いちじょうさんに聞いてみた

この件について、ハンズオン発表者のいちじょうさんに、懇親会で突撃して質問させていただきました。自分もお酒が入っていて完全に覚えていないので、間違っていたらごめんなさい。しかし、とにかく何か 信念を持たれていて、よろしくないマークアップは極力排除しようと熱い想いを持たれていました。

私「そもそもマークアップHTML5で厳格にやるという発想に驚きました。そう言うのは本来XML(XHTML)の仕事ではないでしょうか?」

HTML5ではなく、XHTML2.0が出来ていたなら、さらにルールが厳格化されたでしょう。しかし、受け入れられたのは緩やかさが必要です。理想を求めるのではなく、実社会では現時点でベターな一時的な存在が必要なのです。

「テンプレートエンジンなどを作っていると、IDやclassが一定のルールで制限されますがそれは望ましくないのでしょうか?」

実は仕事上そのようなテンプレートエンジンを扱うことが多いです。あまり望ましくはないですが、しぶしぶ使います。それでもなるべく不要なIDやclassは避けるようにします。class='red'などは、色が赤じゃなくなったらどうするのか?と言って部下には書かせないように徹底しています。

「HTMLからデザインを排除する目的はなんですか?」

HTMLは見た目ではなく、URLに対応する「リソース」だと思います。例えば、デザイナが文字に色をつけたとして、それは「色を付けただけ」なのでしょうか?必ずそこには「強調したい」などの意味が含まれています。

考察

いちじょうさんに伺ってわかったことは、現段階も理想型ではないということです。Webで提供されるのは紙ではなくデータです。したがって扱うのは見た目ではなく情報なのです。データを情報として扱うのに最適なフォーマットを使い、見た目の部分を外出しすることがURL=リソースを中心としたWebという世界のあり方なのですが、しかし現実はそこまで追いついておらず、各種ハックを使いながら、理想を目指して歩んでいるのだと思います。

自分もCSSが不慣れなだけで、慣れればこの書き方は良いのかもしれません。CSSはimportもでき、mediaクエリや、いろいろな道具を使い分けることで、かえって共通化を徹底できるかもしれません。マークアップ側もよりルール化された記述をすることで、統一性のあるページ群をつくることが 出来るのかもしれません。

言えることは、今あるものも理想型などではなく、理想に向かっての一時的な状態であるということです。理想に向かって現実を一歩一歩踏みしめることで、未来のWebがより一層便利なものになると思います。

だれも何が答えかなんてわかりません。