MaintainableCSSを読んでみてシングルクラスとマルチクラスの自分なりの考察

MaintainableCSSを読んでみてシングルクラスとマルチクラスの自分なりの考察

MaintainableCSSを読んでからずっと考えてました。特に再利用性というところでかなり意見が分かれるんじゃないかなと。要はシングルクラスなのかマルチクラスなのかってとこかと思うんですが、どっちが正解なのかっていうのはなかなか難しいですねー。なので、自分なりに周りに意見を聞いたり考えたことをまとめてみました!

比べてみました

シングルクラス マルチクラス
代表例 MaintainableCSS, BEM Object-oriented CSS,
Bootstrap
方針 複製 再利用
影響範囲 狭い 広い
コード量 多い 少ない
耐久性

方針について

シングルクラスは複製、マルチクラスは再利用という方針を採用しています。マルチクラスの場合はBootstrapに代表されるようにあるCSSのスタイルをいろんなところで使いまわせるようにコーディングします。そうすることで、モジュールの組み合わせでページデザインができますね。一度CSSを作ってしまえば、HTMLのタグにクラス名を付与するだけで出来ちゃいます。例えばボタンだったら

// ボタン共通スタイル
.btn{
  display: inline-block;
  padding: 8px 16px;
}

.btn-primary{
  background: #f00;
}
.btn-secondary{
  background: #00f;
}
<button class="btn btn-primary"></button>
<button class="btn btn-secondary"></button>

こんな感じになりますね。反対にシングルクラスはというと、複製をしてスタイルをつくります。

.btn-primary{
  display: inline-block;
  padding: 8px 16px;
  background: #f00;
}
.btn-secondary{
  display: inline-block;
  padding: 8px 16px;
  background: #00f;
}
<button class="btn-primary"></button>
<button class="btn-secondary"></button>

同じ記述が増えてますね。このようにシングルクラスのほうがシンプルにかつ見通しはいいかもしれないですね。マルチクラスの場合だと、「.btn」とこれとこれとって感じで組み合わせてスタイルを適用せざるをえないので、若干複雑になりやすいかもしれません。

今回のサンプルのようにこれくらいのコードだけならどちらも大した差はなさそうですが、この「複製」と「再利用」の違いは影響範囲、コード量、耐久性で大きな違いが生まれます。

影響範囲について

シングルクラスは影響範囲が狭く、マルチクラスは影響範囲が広いです。それぞれが独立したスタイルを持っているシングルクラスはクラス同士の関係性が低いですよね。反対にマルチクラスの場合、共通のスタイルが存在することが多いですから、共通スタイルを変更する場合は影響範囲が広くなってしまいます。

ボタンくらいだったらいいんですが、例えば商品リストページとユーザーリストページがあったとして、メニュー自体のスタイルはほぼ同じとします。その場合アプローチの仕方がかなり変わります。

シングルクラスの場合

.productsList{
  display: block;
  list-style: none;
  background: #fff;
}

.productsList-item{
  padding: 8px;
  border-bottom: 1px solid #ccc;
}

.userList{
  display: block;
  list-style: none;
  background: #f4f4f4;
}

.userList-item{
  padding: 8px;
  border-bottom: 1px solid #ccc;
}

こうゆう書き方になりますね。マルチクラスの場合は

.list{
  display: block;
  list-style: none;
}

.list.product{
  background: #fff;
}

.list.user{
  background: #f4f4f4;
}

.list-item{
  padding: 8px;
  border-bottom: 1px solid #ccc;
}

ボタンの場合は割と全ページ共通で使うことが多いので、シングルクラスでもマルチクラスでも使い方自体はあまり変わらないんじゃないかなと思いますが、こういうページごとに存在するメニューの場合は上記のようになりますね。

シングルクラスの場合、影響範囲は狭くなりますが、共通してスタイルを変更したい場合にコードを触る箇所が増えてしまいます。逆に、マルチクラスの場合は影響範囲は広いですが、共通して変更したい場合触るコードは少なくて済みますね。

この辺はコーディング担当の趣味趣向に寄っちゃいそうだなー

では次にコード量について見てみます。

コード量について

コード量についてはシングルクラスのほうが圧倒的に多くなります。そりゃあ複製してますからね。その反面、詳細度の問題でスタイルが適用されないなどのトラブルは避けることができます。さらにサイトの規模が大きくなればなるほどCSSを分ける必要性が出てきちゃいますね。

ただ、都度CSSのスタイルをコピーして作るのは骨が折れます。できれば本当に共通して使えるものに関しては使いまわしたいっていうのが本音かなーと思います。

その場合はSassのMixinかExtendを使うとうまく書くコード量は減らすことができるかもしれません。ただ、生成されるコード自体はコード量が多いので注意が必要ですが。

例えばmixinだったら

@mixin list($background){
  display: block;
  list-style: none;
  background: $background;

  &-item{
    padding: 8px;
    border-bottom: 1px solid #ccc;
  }
}

.productsList{
  @include list(#fff);
}

.userList{
  @include list(#f4f4f4);
}

共通化しても大丈夫かなどの精査が必須ですが、このように共通化することができます。かなり書くコード量は減りましたね。というかシングルクラスで設計する場合はSassとmixinなど使わない限りかなり辛いですね・・・

耐久性について

ここでいう耐久性というのは、破綻のしにくさです。運用の仕方次第のとこありますが正直そこまでの差は生まれないかなって思ってます。が、どちらかといえばシングルクラスのほうが耐久性はありそうです。なんといっても複製基準なので、影響範囲が少ないですから。反対にマルチクラスは影響範囲が広い分耐久性という意味では劣ります。ただ、運用方法やガイドラインがしっかりしている前提ですし、それがなければどちらもあっという間に破綻します。

じゃあ、どっちのほうが優れているのか?

結論から言うとCSS自体の特性上どっちも優れていますし、どちらもイマイチのところがあるのかなと思ってます。結局は、運用方法によりけりになってしまいますね。シングルクラスにしてもマルチクラスにしてもいろいろな方法論があるので、自分の好きな方でいいのかなと。

ハイブリッドについて

知り合いに話を伺ったところハイブリッドもありじゃない?みたいな意見をもらいました。

これはシングルクラスというかセマンティックなCSSとして考えていただけるといいかなと思うんですが、再利用できる物はできるように設計し、複製したほうがいいものはシングルクラスというかセマンティックにしておく的な考え方になるんですかね。

これについてはかなり細かいガイドラインがないと破綻しやすい気がしますが、FLOCSSのobject/componentとobject/projectの考えが近いかなと思ってます。componentはBootstrapなどのように再利用できるように設計、projectはLPやページ特有のスタイルについてはセマンティックに設計という感じです。うんうん、これはハイブリッドに設計がしやすそうですね。

参考にした記事

メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS | コリス

http://coliss.com/articles/build-websites/operation/css/maintainable-css-by-adam.html

http://coliss.com/articles/build-websites/operation/css/maintainable-css-by-adam.html

【みんなの反応】メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS | コリス – ねとなび

https://netnaviongae.appspot.com/e/sfeh

https://netnaviongae.appspot.com/e/sfeh

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

http://morishitter.hatenablog.com/entry/2014/07/28/173155

http://morishitter.hatenablog.com/entry/2014/07/28/173155

まとめ

最近新しいサービスに携わるようになってCSSの設計を担当しているんですが、その辺でかなり悩みましたね。いろんな意見があってとても勉強になりました。最終的にはマルチクラスで行くことにしたのですが、今でも若干悩んでます笑。

というのも、React.jsでやっているので、ReactのComponentとCSSのComponentの命名を同一にしたほうが運用、管理しやすいのかもと思っている部分があるんです。そのためにはシングルクラスになるのかなと。なのでReactのComponentの数だけスタイルがあるってことですよね。これはこれで、コード量が肥大化しすぎてしまうのではということでマルチクラスを採用した経緯があります。

この辺は実際に運用してみて考えが変わる可能性があります。リニューアルに合わせてシングルクラス採用してるかもなー

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ