オブジェクト指向CSS、HTML複雑だがパフォーマンスと再利用性向上

Kevin Yank氏がSitePointにFirst Look: Object Oriented CSSのタイトルのもと、オブジェクト指向CSS (Object Oriented CSS: OOCSS)に関する概要をまとめている。同文書ではオブジェクト指向CSSに関してはYahoo!のエンジニアであるNicole Sullivan氏が有名であるとし、Nicole Sullivan氏の発表資料をとりあげてOOCSSについて説明している。

説明によればOOCSSはなにか実体のあるフレームワークではなく、CSSの使い方に対する視点変更を求めるものだという。結論からまとめれば、ロケーションを特定してCSSを適用する方法をやめて、そのかわりより複雑なHTMLと、小さい再利用可能なCSSの集まりでサイトを構築しよう、ということになる。

Kevin Yank氏はサイドバーを作成する例えをだしながら、サイドバーを作る場合、表示するページごとに若干表示をカスタマイズしようと考えれば、body要素にclass属性を追加して「body.onsale .sidebar」のように対象を特定してスタイルを適用するだろうと説明。これに対してOOCSSではそのページ用のサイドバースタイルは別に用意し(.onsalesidebarと名前がつけられている)、HTMLの方で「<div class="sidebar onsalesidebar">」のように記載することになると説明している。

この発想の原点はどこにあるかといえば、パフォーマンスの改善にあると説明されている。ブラウザが表示する場合のパフォーマンスは、HTMLの描画よりも適用する要素の特定などが入ったCSSの方が負荷が高いものとなる。このため、CSSを小さいサイズにして、パスの特定も簡単なものにしておけば、それだけパフォーマンス改善につながる。さらに自分の好みとするスタイルが小さいパーツとして保持できるため、コピー&ペーストで開発できるようになる。これに対する問題はHTMLの方が複雑になるということだ。どちらをとるかはトレードオフの関係にある。