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

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

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

no image

各種ブラウザの印刷のバグが治る(かも知れない)CSS の設定。

float を使って段組みのレイアウトにしているとき、印刷がおかしくなることが多々あります。 というか、おかしくならないことの方が多い。 というか、float を使ってなくてもおかしくなることの方が多 …

no image

上付き(下付き)の設定は(X)HTMLタグかCSSか。

「m3」や「CO2」など、上付き・下付き文字を設定する場合にいつも悩みます。 上付き(下付き)にすることに意味があるような気がするので、(X)HTMLで問題ないとは思いつつ。 でもやっぱり見た目をコン …

no image

CSS のプロパティの書き順をちゃんと決めることにした。

「今さらかよ」という声が聞こえてきそうですが。 前々から「いつかやろう」「これが終わったらしよう」と思いつつ早幾月。 ようやく踏ん切りが付きました。 ので、自分はこういう順番で書きますよー、という宣言 …

no image

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

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