OOCSS(Object Oriented CSS:オブジェクト指向CSS)

2011.02.01crossnodeCSS


CSSにも慣れてきて複雑なレイアウトも組めるようになり、サイトの規模も大きくなってくると、似たようなidやclassが増えてきていつの間にかスパゲッティの出来上がり。なんてことが起きてきますよね。そんなときに一考の価値があるのがOOCSS(Object Oriented CSS)つまりオブジェクト指向CSSという考え方です。例えば、枠線を付ける、背景色を付けるといったスタイル指定ごとにclass名をつけて、HTML側で任意の要素に対して複数のclassを組み合わせて使用するというものです。スタイル指定ごとに細かくclassを分けるので、classの数は多くなりがちですが、同じスタイル指定を含むclassが減りCSSの見通しがよくなります。要は、他のプログラム言語でよくある、処理ごとに関数を作っておいて必要なときに各所で実行するというあの考え方です。

ということで、従来型とOOCSSとで同じページを記述した場合の例文を見比べてみましょう。

00 : 従来型の場合

HTML

<div id="leftBox">
	左側のボックスです
		左寄せ
		幅150px
		枠線:太さ1px / 実線 / 濃いグレー
		背景色:薄いグレー
</div>
<div id="centerBox">
	中央のボックスです
		左寄せ
		幅400px
		枠線:太さ1px / 実線 / 濃いグレー
		背景色:薄いグレー
</div>
<div id="rightBox">
	右側のボックスです
		右寄せ
		幅150px
		枠線:太さ1px / 実線 / 濃いグレー
		背景色:薄いグレー
</div>

CSS

#leftBox{
	float: left;
	width: 150px;
	border: 1px solid #333333;
	background: #CCCCCC;
}
#centerBox{
	float: left;
	width: 400px;
	border: 1px solid #333333;
	background: #CCCCCC;
}
#rightBox{
	float: right
	width: 150px;
	border: 1px solid #333333;
	background: #CCCCCC;
}

各要素に関するスタイル指定が固有のidにまとめて記述されているので、こちらの方が分かりやすいという人もいますし、数ページの小規模サイトの場合にはこの書き方でも十分かもしれません。
しかし、同じスタイル指定があちこちで何度も出てくるので効率悪いと感じるかもしれません。1ページごとにがらっとデザインが違うというサイトでなければ、文字や背景の色等各ページで共通する部分も多く、規模が大きくなればCSSファイルの容量も気になってきます。

01 : OOCSSの場合

HTML

<div class="left small border bg">
	左側のボックスです
		左寄せ
		幅150px
		枠線:太さ1px / 実線 / 濃いグレー
		背景色:薄いグレー
</div>
<div class="left large border bg">
	中央のボックスです
		左寄せ
		幅400px
		枠線:太さ1px / 実線 / 濃いグレー
		背景色:薄いグレー
</div>
<div class="right small border bg">
	右側のボックスです
		右寄せ
		幅150px
		枠線:太さ1px / 実線 / 濃いグレー
		背景色:薄いグレー
</div>

CSS

.left{
	float: left;
}
.right{
	float: right;
}
.small{
	width: 150px;
}
.large{
	width: 400px;
}
.border{
	border: 1px solid #333333;
}
.bg{
	background: #CCCCCC;
}

CSSには細切れにスタイル指定が記述されているだけで、HTML側でclassを組み合わせることによって装飾するというかたちです。CSS内の重複する指定が減りすっきりしましたが、HTMLのclass指定が複雑になるので分かりにくいという人もいるかもしれません。
しかし、HTML上で構造とスタイルの両方を把握できるようになるので、表示状態をイメージしやすくなります。基本的なclassは別サイトにも流用できますから、そうしたclassを記述しておいたCSSのテンプレートを作っておけば作業時間の短縮に有効かもしれませんね。


ページトップへ