hijiriworld Web

米ヤフーのNicole Sullivan氏が提唱する「OOCSS（オブジェクト指向CSS）」について紹介します。

Object-Oriented CSS

という考え方です。

噛み砕いて言うと、IDをきっかけに子孫セレクタによってスタイルを定義するのではなく、すべてのスタイルをクラスで定義して複数組み合わせる。ということです。

IDを振って要素依存、場所依存でCSSを書いていく従来の方法だと、サイトが大規模になればなるほど、CSSはスパゲッティ状に煩雑となっていきます。
それぞれ独自のIDでスタイルを定義してしまえば、当然、同じようなサイトを新規で立ち上げる際にも、また一からCSSを記述しなければならなくなり、制作コスト・メンテナンスコストはどんどん膨らんでしまいます。

そこで、OOCSS（オブジェクト指向CSS）のススメです。

わかりやすい解説

以下のボックスをコーディングする場合を考えます。

【従来の方法】

<div id="boxA"></div>
<div id="boxB"></div>

#boxA {
	width: 50px;
	height: 50px;
	border: 1px solid red;
	background-color: #FFCCCC;
}
#boxB {
	width: 50px;
	height: 50px;
	border: 1px solid blue;
	background-color: #66CCFF;
}

【OOCSS】

<div class="box box-red"></div>
<div class="box box-blue"></div>

.box {
	width: 50px;
	height: 50px;
}
.box-red {
	border: 1px solid red;
	background-color: #FFCCCC;
}
.box-blue {
	border: 1px solid blue;
	background-color: #66CCFF;
}

といった感じです。

いままで「OOCSS」という言葉を知らなくても、マークアップエンジニアや、ある程度経験のあるWebデザインナーであれば、効率化を図るために自然にやっていることではないでしょうか？

この考え方を体系化してまとめたものがOOCSSです。

では次にOOCSSがどのような考え方のもとに設計されたのかを見ていきましょう。

パフォーマンスの向上

OOCSSの発想の原点は、パフォーマンス向上にあるそうです。

・CSSセレクタは右から左に解釈されるので、#foo .bar {} より、.bar {} の方が高速。

・孫セレクタは遅いので、 #wrapper #sidebar ul li {} ではなく、リストにクラスを振って、.page-list {} とした方が高速。

など。（参考: CSSセレクタの高速化の話

再利用性の向上

また、汎用的なスタイルをパーツとして保持しておくことが可能なので、基本的なクラスやよく使うクラスは、別サイトでもそのまま流用できるようになります。

これがOOCSSの一番のメリットではないかと思います。

例えば、以下のようなクラスは、いかなるサイトでも再利用できますよね。

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

.clearfix {
	*zoom: 1;
	overflow: hidden;
}

このような汎用的なスタイルをパーツとして用意しておいて、新規サイトを立ち上げる際には必ず読み込むことをルール化しておけば、非常に効率的です。
さらに、クラス名を見ただけで誰でも容易にスタイルが想像できるものであれば、なおグッドな訳です。

次に、OOCSSのドキュメントに基づいて、より具体的な定義について見てみましょう。

コンテナとコンテンツの分離、構造とスキンの分離

OOCSSでは具体的なクラスを定義しています。
その中のひとつ、「Modules」という構造は以下のように定義されています。

構造とスキンがきちんと分離されています。

これを元にコーディングしてみます。

> HTML

<div class="line">
	<div class="unit size1of3">
		<div class="mod">
			<p><strong>.mod</strong>は基本的なコンテナです。</p>
		</div>
	</div>
	<div class="unit size1of3">
		<div class="mod mod-red">
			<p>.modに<strong>.mod-red</strong>というスキンをあてています。</p>
		</div>
	</div>
	<div class="unit size1of3 lastUnit">
		<div class="mod mod-blue"> 
			<p>.modに<strong>.mod-blue</strong>というスキンをあてています。</p>
		</div>
	</div>
</div>

> CSS

.line {
	width: 100%;
}
.unit {
	float: left;
}
.size1of3 {
	width: 33.3333%;
}
.mod {
	margin: 10px;
	color: black;
	border: 1px solid black;
}
.lastUnit {
	display: table-cell;
	float: none;
	width: auto;
}
.mod-red {
	color: red;
	border-color: red;
	background-color: #FFCCCC;
}
.mod-blue {
	color: blue;
	border-color: blue;
	background-color: #66CCFF;
}

> 表示

.line, .unit, .modという基本的なコンテナクラスに、.mod-red, .mode-blueというスキンを組み合わせています。
こうすることで、構造とスキンが明確に分離できます。

OOCSSはクラス設計が重要

従来の方法では、プロパティを見ることが多かったと思いますが、OOCSSでは逆です。
どのセレクタを選ぶかがポイントとなります。

よって、クラスを上手に設計することが成功の鍵となります。

つづきはこちら: 難しいOOCSS（オブジェクト指向CSS）の設計

まとめ

・OOCSSによってパフォーマンスと再利用性、メンテナンス性が向上する
・クラス設計が重要！
・まずは Object-Oriented CSS の資料を全部読んでみよう

（参考）
Object-Oriented CSS
What’s Object-Oriented CSS (japanese)