OOCSS

OOCSSは、「 Object Oritented CSS(オブジェクト指向CSS) 」の略です。

具体的な手法として以下の2つがあります。

• ストラクチャーとスキンの分離
• コンテナとコンテンツの分離

ストラクチャーとスキンの分離

「 構造 」にあたるのがストラクチャー、「 デザイン細部のこだわり（あしらい） 」にあたるのがスキンです。

ストラクチャーにあたるプロパティには以下のようなものが該当します。

• width
• height
• padding
• margin

スキンにあたるプロパティには以下のようなものがあります。

• color
• font
• background
• box-shadow
• text-shadow

「 ストラクチャーとスキンの分離 」についての簡単なサンプルです。

<main id="main">
  <button class="btn-general">標準ボタン</button>
  <button class="btn-warning">キャンセル</button>
</main>

#main .btn-general {
  display: inline-block;
  width: 300px;
  background-color: #00d3e2;
  color: #fff;
}
#main .btn-warning {
  display: inline-block;
  width: 300px;
  background-color: #f100c9;
  color: #fff;
}

上記を「 ストラクチャーとスキンの分離 」に従って書き直すと以下のようになります。

<main id="main">
    <button class="btn general">標準ボタン</button>
  <button class="btn warning">キャンセル</button>
</main>

/* ストラクチャー */
#main .btn {
  display: inline-block;
  width: 300px;
}

/* スキン */
#main .general {
  background-color: #00d3e2;
  color: #fff;
}
#main .warning {
  background-color: #f100c9;
  color: #fff;
}

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

「 ストラクチャーとスキンの分離 」の CSS では、「 main 」の外で使おうとしても使うことがで来ません。

以下の HTML では div 内の button には CSS が適用されません。

<main id="main">
  <button class="btn general">標準ボタン</button>
  <button class="btn warning">キャンセル</button>
</main>

<div>
  <button class="btn general">標準ボタン</button>
</div>

以下のように CSS を変更すれば div 内の button にも CSS が適用されます。

/* ストラクチャー */
.btn {
  display: inline-block;
  width: 300px;
}

/* スキン */
.general {
  background-color: #00d3e2;
  color: #fff;
}
.warning {
  background-color: #f100c9;
  color: #fff;
}