非フロントエンドエンジニアのためのCSS設計入門（OOCSS）

CSSを書いていて、設計方針がわからない、破綻して!importantをつけざるを得なくなってしまうことがあったため、CSS設計の1つの考え方であるOOCSSについてまとめてみました。

この記事では

• オブジェクト指向
• CSSの詳細度

については説明しません。

OOCSSとは

オブジェクト指向CSSのことです。

• 同じコードを2度書かない
• どこに書いても同じ振る舞いをする

辺りを目的とした、CSSの設計概念です。2つの原則を用いて、変更に強い設計を目指します。

OOCSSの2つの原則

構造とスキンの分離

同じコードを2度書かないようにするためです。
赤い箱を「赤い」と「箱」に分けます。
そうすることで、青い箱が必要になったときに、「箱」の部分を共通化することができます。

Before

<div class="box-red">
</div>
<div class="box-blue">
</div>

.box-red {
  width: 700px;
  height: 700px;
  margin: 0 auto;
  background-color: #FF0000;
}
.box-blue {
  width: 700px;
  height: 700px;
  margin: 0 auto;
  background-color: #0000FF;
}

After

<div class="box box-red">
</div>
<div class="box box-blue">
</div>

.box {
  width: 700px;
  height: 700px;
  margin: 0 auto;
}
.box-red {
  background-color: #FF0000;
}
.box-blue {
  background-color: #0000FF;
}

念のためですが、ここでは説明のため色をクラス名にしてしまっていますが、このようなネーミングはおすすめしません。クラス名を値名にしてしまうと、値に変更があった場合、ネーミングに不整合が生じるためです。

.box-red {
  background-color: #00FF00; // 背景色の値は緑なのにクラス名はred
}

コンテナとコンテンツの分離

極力、子孫セレクタ、要素型セレクタは使わずに、同じクラスでCSSを当てるようにします。
どこに書いても同じ振る舞いをするためです。

Before

<div class="side">
  <h2>...</h2>
</div>
<div class="main">
  <h2>...</h2>
</div>

.side h2 {
  width: 700px;
  font-size: 14px;
}
.main h2 {
  width: 700px;
  font-size: 16px;
}

After

<div class="side">
  <h2 class="heading heading-side">...</h2>
</div>
<div class="main">
  <h2 class="heading heading-main">...</h2>
</div>

.heading {
  width: 700px;
}
.heading-side {
  font-size: 14px;
}
.heading-main {
  font-size: 16px;
}

Beforeの書き方で書いてしまうと、

「同じ装飾を他のエリアのタグにも当てたい」場合に、同じコードを書かくか、セレクタを追加しないといけません。
また、「同じエリアだけど違う装飾を当てたい」場合には、CSSの詳細度を意識したポイント制の戦いを始めなくてはなりません。

以上、間違いがあれば教えてください。