btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

CSS

OOCSS(Object Oriented CSS:オブジェクト指向CSS)を初めて知った。

投稿日:

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 をすべて準備しておいて、スタイルを「作る」のではなく「選ぶ」ようにした方が効率的かつ確実です。

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

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







-CSS
-, ,

執筆者:


  1. OOCSS(オブジェクト指向CSS)というものを初めて知った

    OOCSSって、知っていますか?
    私は知りませんでした。始めて聞いたけど、興味がわいてきた永無です。

    OOCSSとは、Object Oriented CSSの略でオブジェクト指向CSSのこと、だそうです。

    私は…

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

col/colgroup 要素で有効なスタイルと無効なスタイル。

「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にも …

no image

Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。

珍しく Firefox のバグです(だと思います)。 あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。 つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

背景画像を設定した要素のテキストに IE でもドロップシャドウを表示する方法。

CSS3 には「text-shadow」というプロパティがあり、これを指定するだけでテキスト要素に影を付けることができます(色や距離やぼかし具合もコントロール可)。 ただし、IE 以外ですが。例に漏れ …

no image

floatとline-heightを一緒に指定すると、文字が欠ける。

ときどきWindowsのIEで、文字が数ピクセル欠けて表示されることがあります。 その原因の一つが、floatとline-heightを一緒に指定していること。 とりあえず同じ要素に指定しなければ発生 …