読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

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

CSS


f:id:vinton:20070318033403j:plain:w500

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

OOCSSとは

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

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

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

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

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;
}