[OOCSS] 構造と見た目を分離する（Separate Structure and Skin）

構造と見た目を分離する（Separate Structure and Skin）

OOCSSの重要な原則のもうひとつが「構造と見た目の分離」です。

構造とは何か？

例えばボタンコンポーネントを3つ作ったとします。

.button-success {
  display: inline-block;
  padding: 0.75em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: blue;
}

.button-warning {
  display: inline-block;
  padding: 0.75em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: orange;
}

.button-alert {
  display: inline-block;
  padding: 0.75em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: red;
}

それぞれのプロパティを見てみると共通する部分があります。その中から色やアニメーションのような装飾的なスタイルを除いたものが構造です。この構造を1つのクラスにまとめて装飾的なスタイルだけを持つクラスを3つ指定してみます。

.button {
  display: inline-block;
  padding: 0.75em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.button-success {
  color: #fff;
  background-color: blue;
}

.button-warning {
  color: #fff;
  background-color: orange;
}

.button-alert {
  color: #fff;
  background-color: red;
}

構造を3つのクラスすべてに指定した場合、それぞれ7行分のプロパティを指定しているので21行になります。構造だけをまとめたクラスを作った場合、5行と2行×3になるので11行になりました。

パッと見ただけでもスッキリして見通しが良くなっているのが分かると思います。
ボタンのパターンを追加したい場合では装飾部分だけを指定すればいいだけですし、ボタンのサイズを一括で変更したい場合でも、構造用のクラス（.button）のpaddingなどを変更すれば、すべてのボタンのパターンに適応されます。

HTMLには以下のようにマルチクラス（複数のクラス）で指定します。

<a class="button button-success">.button-success</a>

マルチクラスはHTML側の指定が長くなるというデメリットはありますが、追加や修正に強くなるメリットがあります。

クラス名のつけかた

OOCSSの言う「見た目」は直接的な名前をつけることを禁止しています。

例えば以下のような名前は直接的すぎます。

red
crimson
mb10

以下のように抽象的、相対的な名前をつけるべきです。

emphasis
brand
mb-small

直接的な名前は値を変更すると、名前の意味と値の意味が合わなくなる恐れがあります。

.red {
  /* 強調の意味で色を変えていたけれど、デザインが変更された */
  color: black;
  font-weight: bold;
}

/* ブランドカラーが変更されてしまった */
.crimson {
  color: blue;
}

/* マージンを微調整したいけど、固定値なのでHTMLを書き換えないといけない */
.mb10 {
  margin-bottom: 10px;
}

構造は以下のようなプロパティが当てはまります。

display;
position
float
width
margin
border

borderは構造としても装飾としても指定することがあるので、状況に応じて考えます。

パターンは3つ以上から

「Rule of three」という言葉があります。3回繰り返したことはパターン化できる可能性が高いということです。

構造と見た目の分離という最適化はすぐに始める必要はありません。いくつかのコンポーネントを作ってから、「パターン化できそうだ」と思ったら最適化を始めるくらいでもいいでしょう。

パターンは3つのコンポーネントという単位以外にも、3つの案件で使ったという単位で考えてもいいでしょう。そのコンポーネントはどんな案件でも使うような汎用性の高いコンポーネントかもしれません。

manabuyasuda / styleguide