今更ながらOOCSS(Object Oriented CSS)についてちゃんと考えてみる
※ この記事は、Sep 16, 2009に投稿されたものを再掲したものです。情報が古かったりリンクが切れてたりするかもしれません。というか、当時、全く理解できてなかったっぽいのがバレバレで恥ずかしいです。
最近困った事などを反省する意味も込めて、新しい手法を身につける必要があると感じたので、今更ながらOOCSS(Object Oriented CSS)についてちゃんと考えてみることにしました。
とりあえず今日のところはメモ程度です。 英語。。。全く自信がないので、誤りをご指摘いただけると大変助かります（願
なんでやろうと思ったか
個人的に、最近はCMS絡みの案件がとても多いです。
CMSのテンプレートなどを書く場合もあれば、その基礎となるHTML/CSS/JSあたりを書く場合もあります。
その際に、予めかなり様々なパターンをシミュレートして、利用するレイアウトなどが全て用意されている状態でスタート出来れば特に問題ないと思うのですが、そんな事は稀で、実際には「似たような見た目だけどちょっと違う」みたいなのがどんどん増えていって、更に仕様変更が入ったりするので、スケジュールによっては「我ながらスゴイ！（悪い意味で）」と思える程スパゲティーになっちゃう事も多々......
そんなこんなで良き方法は無いかと考えていたのですが、「HTML汚してCSSスッキリって本末転倒じゃね？」とOOCSSは敬遠していました。
他に、Clearleftのフロントエンドの人がCSS Systemsという開発スタイルを発表していましたが、こちらはどちらかというとレギュレーションというか、マークアップのガイドラインみたいな内容に思えました。
ただ、双方で一致していた（と感じた）のは「再利用」というキーワードです。
実際には、海外と日本とではデザインの作りからして違うので、フレームワーク的なものを作ってもなかなか再利用は難しいのですが、多数の案件で再利用するのではなく、「大規模なサイト」「WEBアプリケーションなどのUI」「CMSの利用などで運用フェーズも意識」といった案件では、ある程度有用かもしれない。 けど、書いてみた事がないから、こまか〜い部分で色々ゴニョゴニョあるかも？
という訳、ちょっと書いてみようかと。
で、今日のところは基本的な概念というか、方針というか。 その辺をメモしておきます。
OOCSS概要
まずは、色々読みました（日本語では、まだ実践レベルの深い話は見つかってません）。
参考サイト
- WDE08 Blog: Object Oriented CSSとCSS Systems
ビデオとかスライドが紹介されてます。オリジナルを見るのに。 - はてぶ
- マイコミ
大筋だけ日本語で掲載されてます。
主な目的
- 構文的にどうこうとかclass名が云々とかではなく、目的優先
- パフォーマンスを重視する
- 再利用できるようにする
多分、これらを踏まえて、
- 設計者とコーダーを分けて効率化
- 組み合わせだけで様々なバリエーションを作れるように
とかも考えてるのかな？
「実用はどうかな？」といった感じだけど、一回作ってみても損はないかな。
この後から本文ですが、怪しい訳がはじまります。
非常に怪しいので、アテにしないでください（汗
ページやモジュール単位ではなく、目的単位で
これは、もうちょい情報が欲しいところですが、「レイアウトだけ」「内容だけ」「見た目だけ」といった感じでclassを作りましょうという話だと理解しました。
ものすごい極論で例を挙げれば、
<ul class="unordered">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<style>
.unordered {
list-style: disc;
margin: 1.5em 0;
padding: 0 0 0 2.0em;
}
</style>
こんなのを
<ul class="disc margin padding">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<style>
.disc {
list-style: disc;
}
.margin {
margin: 1.5em 0;
}
.padding {
padding: 0 0 0 2.0em;
}
</style>
こんな感じで書く。と。
class名もあり得ないし、これじゃstyle属性に書いてるのと変わらん！という内容ですが、あくまで極論だし例です。
目的に合ったデフォルトを設定
すみません。この部分は訳が全く合ってない気がします。
なのでスルー。
再利用可能でコンパクトな要素で
これは、最初の方でも書きましたが、「ひ孫くらいまで作り込んじゃったり、結構遡って継承させないとダメな作りにはしない」という意味だと思います。
サンプルで出てたのは、「bodyのidやclassを基点にしてスタイルを書き分けるのは止めよう」って内容でした。
あと、「ul li aとかしない」みたいな事も書いてあったけど、これは説明を聞かないと真意が掴めませんね。単純にPage Speedとか使った時に警告される内容の話かもしれませんが......←スライドを見直してないですが、これ、パフォーマンスの話ですよね。きっと（Mar 16, 2012追記）
構造と見た目（スキン）を分離
この辺からは、思想的には重複した内容ですが、より具体例って事でしょうか？
現時点では、この方法は、運用フェーズに入らないと効力を発揮しそうにないんだよな......
開発してる段階では、一カ所に書いておかないと、修正の都度あっちこっち飛ばなきゃいけないし......
まあ、書いてみないで判断するのは良くないですね。
型（入れ物）と（編集可能な）内容を分離
まあ、これも「コンパクトに」ってところを押さえれば同じ内容だと思います。
ただ、最近良く思うのは、ol liとかがマッサラになってると、CMSとかで「WYSIWYG編集して貰おう！」って決まった時にスゲー面倒だなあ。と。
「的に合ったデフォルトを設定」はこういう意味かな？（と思ったけど、oocss.orgを見ると、思いっきりリセットしてある。）
継承を使いこなす
原文では「飼いならす」的なニュアンスだったように感じますが、どっちみち真意が伝わってこないな。
この後出てくる、複数class指定と絡めて、「必要なトコだけoverrideするようにすればCSSがコンパクトになるよ」的な内容なのだろうか......後でもう一回読むか......（汗
複数クラス指定を使う
これは、すでに結構使ってるんですが、ネストした場合の事とかをよい深く考慮して設計する必要がありますね。
コンパクトなclassが一杯ある訳ですから、コンフリクトが怖いです。
最後に
ここまで読んでみると、「最近、こういう感じのサイト多いよな」と思います。
class名とかも「grid3」とかにしてありますね。
ただ、謎なのは、class使うよりidの方がパフォーマンス面では良さげなんですが、トータル的にどうなんだろう？←これ、やっぱり分かってなかったみたいですね（恥）（Mar 16, 2012追記）
自分用のメモとしては、これで十分かな？
「オブジェクト指向的にCSSを書こう」という試みは、OOCSSが話題になる前にチャレンジしたんですが、スケジュールに負けて最後グダグダになった経緯もあり、今度こそしっかり進めたいです。
