OOCSS（Object Oriented CSS：オブジェクト指向CSS）を初めて知った。

投稿日：2012 年 2 月 12 日

「CSSや画像の命名規則について : Web Design KOJIKA17」という記事を読んで、「OOCSS（Object Oriented CSS：オブジェクト指向CSS）」のいうのがあることを初めて知りました。

いや、そういう方法があることは知ってたんですが、ちゃんとした名前まで付いた方法論として確立してるとは。
というか逆に、僕の認識では「やるべきじゃない」方に分類される方法だったんですがね。
知らない間に流れが変わってたんでしょうか。

「OOCSS」とは？

簡単に言うと、これまでは「一つの id や class に複数のスタイルを設定する」のが主流でした。
でも、この OOCSS では「一つの class には一つのスタイルを設定する」という方法を採ります。
加えて、class 名もなるべく分かりやすく（「.green」とか「.left」とか）命名します。
これにより、class を組み合わせてスタイルを使い回すことができますし、class の名前だけでその内容が理解しやすくなる、というメリットが生まれる訳です。
OOCSS の説明から id が抜けていたのは、OOCSS では「スタイルを使い回す」ことを前提にしており、そもそも id を使わないからですね。

……って、文章だけで説明してもイマイチ分かりづらいので、具体的な方法やら解説やら事例やらについては他のサイトに譲ります（オイ

考察：OOCSS が向いているのは？

この OOCSS が向いているのは、中～大規模サイトでしょう。
コーディングに関わる人も多いでしょうし、細かいデザインの違いに対して id や class をいちいち設定していては、時間がいくらあっても足りません。
関わる人が多いということは、スキルや考え方がバラバラの人たちが一つのサイトを作るということ。
いくらルールを決めて「ああしろ」「こうしろ」と言ったところで、まずその通りにはなりません。
逆に、共通デザインのスタイルがいろんなところに散らばったり、サイドバーのスタイルを変更したらなぜかフッターが崩れたり、本当にロクなことがないんですよ、ええ（経験談）。
それであれば、あらかじめ class をすべて準備しておいて、スタイルを「作る」のではなく「選ぶ」ようにした方が効率的かつ確実です。

逆に、一人で制作・構築できるような小規模サイトであれば、従来の方法を採った方が早くて間違いが少ないかも知れません。
「実際に作るより準備に時間かかるわー！」ってなりかねませんからね。

何にせよ、メリットとデメリットは当然ある訳ですから、きちんと見極めて使い分けたいところです。