Sassではじめる擬似オブジェクト指向型CSS

「オブジェクト指向型CSS」といっても新しい記法などではなく、CSSの組み方の概念を指します。
CSSの効率化を考えている人は無意識的にすでにやっているかも知れません。

たとえば下記のようなCSSがあったとします。

.box1 {
  width: 300px;
  height: 300px;
  padding: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.box2 {
  width: 500px;
  height: 400px;
  padding: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

これ自体はごく普通のCSSですが、よく見ると .box1 と .box2 は幅と高さが違うのみで他は同じです。

重複しているスタイルの分だけファイル容量がかさんでいることになります。
例のようにベンダープレフィックスの必要なプロパティを含んでいるとなおさらです。

そこで、オブジェクト指向型CSSの考えでは下記のように分割されます。

.box {
  padding: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.box1 {
  width: 300px;
  height: 300px;
}

.box2 {
  width: 500px;
  height: 400px;
}

「角丸の箱」というスタイルだけを持つ「.box」を作り、box1とbox2は大きさだけを定義します。
こうすることでCSS側は無駄にファイルサイズが増えることなく、またメンテナンス性も高く持つことができます。

ただ、デメリットとしてはHTML側に記述するクラス量が下記のように増えるという点ですが、実際は大したデメリットでもありません。

<div class="box box1"></div>

下記のように簡易的なものも含めて、共通設定を汎用的に扱えるよう独立させる考え方がオブジェクト指向型CSSになります。

.fs12 {font-size: 12px}
.fcRed {color: #f00}
.mt10 {margin-top: 10px}

オブジェクト指向型CSSの基本的な概念は以上です。

Sassで擬似的オブジェクト指向型CSS

冒頭のCSSはSassの記述で下記のように短縮化できます。

.box1 {
  width: 300px;
  height: 300px;
  padding: 10px;
  @include border-radius(4px);
}
.box2 {
  width: 500px;
  height: 400px;
  padding: 10px;
  @include border-radius(4px);
}

記述的にはスッキリはしましたが冒頭のCSSと同じ内容に出力されるのでソース的にはスッキリしません。

ここで、Sassの @extend を使って下記のように組み変えてみます。

.box {
  padding: 10px;
  @include border-radius(4px);
}
.box1 {
  width: 300px;
  height: 300px;
  @extetnd .box;
}
.box2 {
  width: 500px;
  height: 400px;
  @extetnd .box;
}

これをCSSに出力すると下記のようになります。

.box, .box1, .box2 {
  padding: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.box1 {
  width: 300px;
  height: 300px;
}

.box2 {
  width: 500px;
  height: 400px;
}

オブジェクト指向型に書き換えたCSSにだいぶ近くなりました。
異なるのは .box に .box1 と .box2 も並行記述されている点だけです。

ソースの削減量では純粋なオブジェクト指向CSSに一歩劣りますが、こちらのメリットとしては下記のようにクラス1つでHTMLに記述できる点です。

<div class="box1"></div>

一般的に言われているオブジェクト指向型CSSはHTML側にクラスを複数記述することが前提のように扱われているので「擬似」としましたが、コーディングの時点では「@extend」を使うことでクラスの関連性が分かりやすくなるので、メンテナンス性に優れる利点もあります。

Sassを使わなかったとしても、オブジェクト指向型CSSの概念はソース容量の削減やデザインの統一性、メンテナンス性の向上にも役立つのでオススメです。