CSSの行数が少なくなる!?OOCSSを始めてみよう

中～大規模のサイトを制作するとCSSが半端なく長くなることが多々あります。こんなときCSSの行数を減らすことができるのがOOCSSというスタイルシートの考え方です。行数が少なくなるほかにもいろいろ便利な面があります。

OOCSSとは

OOCSS = O bject O riented C ascading S tyle S heets

オブジェクト志向スタイルシート。

構造(サイズ等)とスキン(色など)に分離してクラスを定義し、class属性に複数のクラスを指定するという考え方です。

イメージとしては、
あらかじめスタイルを定義した部品（レゴ）を組み合わせて作品を作るという感じです。

Nicole Sullivanという人が提唱しました。

The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009 from Nicole Sullivan

メリット

• 複数のサイトで再利用が可能
• パフォーマンスが向上する
• 行数が少なくなる
• 大人数でやるときに迷いが少ない
• sassとの相性がいい

デメリット

• 初期設計を間違えると後々大変
• デザインはスタイルシートという考えに反する？
• 細分化しすぎるとclass名が長くなる可能性がある
• ie6では崩れる

OOCSSの例

例えば以下のHTMLのように画像の位置を左右真ん中に配置するケースはどのサイトでも使う可能性が高いと思います。

HTML

<img src="http://placekitten.com/150/150" class="alignleft">
	
<img src="http://placekitten.com/150/150" class="alignright">

<img src="http://placekitten.com/150/150" class="aligncenter">

1サイトごとにスタイルを指定してもいいですが1度パーツを作っておけばそのクラスをHTMLに記述すれば簡単に実装することができます。

CSS

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

今度は複数のクラスを指定する例をお見せします。

青と赤のボックス(150pxの正方形)が作りたいとします。

HTML

<div class="box150s alignleft bluebg"></div>
<div class="box150s alignright redbg"></div>

まず構造（モジュール）は箱の部分です。
クラス名はbox150sとしました。
※s:スクエアのs
スキン（色の部分）のクラス名はそれぞれbluebgとredbgとします。
このように部品に作っておいてそれを当てはめます。

OOCSSの肝は最初のモジュール作りにあります。いかに汎用性を持たせ、わかりやすいものにするかが大事になります。

CSS

.bluebg {
    background:#0000ff;
}
.redbg {
    background:#ff0000;
}
.box150s {
    width:150px;
    height:150px;
}