CSSのマルチクラス設計の問題点

CSSのルールセットを細かく（classセレクタで）定義し、HTMLに複数のclass属性値を書いてスタイルをあてるような設計をマルチクラス設計と言ったりする。 マルチクラスにすることで冗長な記述が減り、ファイル容量が減り、ルールセットの再利用性が高くなり、保守性が向上する。

OOCSSをはじめとしたCSSの設計概念はマルチクラスを前提としており、Twitter Bootstrap等の多くのCSSフレームワークはマルチクラスでスタイルをあてるようになっている。

<!-- Twitter Bootstrapのボタンの例 -->
<button class="btn btn-primary btn-lg">Save</button>

良いことしかないように見えるマルチクラス設計だが、いくつか問題点もある。

まず、HTMLに複数のclass属性値を書くと共通するプロパティが上書きされるということ。 当前のことだが、共通するプロパティがあった場合、カスケーディングされ詳細度が高い方のルールセットのプロパティが適応される。

そして、ルールセット間に暗黙の依存関係が生まれること。 上記のTwitter Bootstrapの例だと、btn-primaryとbtn-lgはbtnと同じ要素に書かないと行けない。 僕も初めてBootstrapを使ったときにbtn-primaryだけ書いてアレ？ってなったことがある。

今流行りのOOCSSっぽいマルチクラスなCSSの設計手法をとろうとすると、書いた人以外には見えないルールセットの依存関係が存在するので分厚いスタイルガイドが必要になってくる。

僕は、CSSの容量を少しでも削らないといけないほどパフォーマンスにシビアでない限り、Sassでいう@extendを利用したシングルクラスな設計の方がいいと思っている。 HTMLもよりセマンティックにできる。

%btn {
  display: inline-block;
}

%btn-md {
  padding: 5px 10px;
  font-size: 14px;
}

%btn-blue {
  color: #fff;
  background-color: #3071a9;
  border-color: #285e8e;
}

.save-btn {
  @extend %btn;
  @extend %btn-md;
  @extend %btn-blue;
}

また、SassやStylusよりも安全にルールセットの継承ができるYACPというCSSプリプロセッサーがある。

YACPを使ったextendによるシングルクラスな設計、小中規模なWebサイトでスタイルシートの複雑性を削減し、保守性を担保するのに最高感ある。