お前ら今すぐそのCSSフレームワーク使うのやめろ! #CSS

タイトルは釣りです。すみません。

CSSフレームワークって文章構造とスタイル情報の分離ができてなかったり、色々問題だよねって話です。
それではどうぞ。

CSSフレームワークの問題点

以下はBootstrapの公式から持ってきたサンプルコードです。
こちらのサンプルコードを見ながらCSSフレームワークの問題点を探っていきましょう。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

何を構成するコードなのかわからない

CSSのサンプルなので当たり前なのですが、上記のコードからサイトのどの部分を構成しているのかを読み取ることは困難です。
かろうじて検索フォームなのがわかるくらいでしょうか。

文書構造定義とスタイル定義が分離できていない

<div class="col-lg-6">
  <!-- ... -->
</div><!-- /.col-lg-6 -->

col-lg-6はLarge deviceで幅が6/12という意味です。
「Large deviceで幅が6/12」というのは文書構造でしょうか?
いいえ、スタイルですね。
これがCSSフレームワークを使う最大の弊害です。
スタイル定義がHTMLに侵食してしまうのです。

本来、文書構造に変更が生じたときはHTMLのみ、スタイルの変更が生じたときはCSSのみを変更するのが理想です。
ですが、上記の場合例えば「幅を7/12にしたい」というスタイルの変更が生じたときにHTMLを編集しなくてはなりません。
文書構造とスタイルを分離するためにスタイルシートが生まれたのにこれでは本末転倒ですね。

文書構造定義とスタイル定義が混ざることにより、凝集度は下がり、保守性は下がり、いつしかコードはカオスになっていくでしょう。
そして、戦争は繰り返され、幾つもの国が生まれては滅び、幾人もの英雄が現れては死んでき、長い年月が経った頃にはあなたのプロジェクトは終わっているでしょう。
悲しいことです。

そんなこと言ったってどうすりゃいいのさ

Mixinライブラリの使用を検討しましょう

bourbonなどのMixinライブラリの使用を検討しましょう。
Mixinライブラリを使うことで文書構造とスタイルを分離しながら便利なCSSを使うことができます。

上のBootstrapの例を書き直すと以下のようになるでしょうか。(イメージです。実際に動くコードではありません。)

<div class="search_bar">
  <div class="search_bar__search_form">
    <button class="search_bar__search_form__btn" type="button">Go!</button>
    <input type="text" class="search_bar__search_form__submit" placeholder="Search for...">
  </div><!-- /.search_bar__search_form -->
  <div class="search_bar__option_form">
    <!-- 省略 -->
  </div><!-- /.search_bar__option_form -->
</div><!-- /.search_bar -->

.search_bar {
  @include grid-container;
  &__search_form {
    @include grid-column(6);
    @include display(flex);
    &__input { @include flex(1); }
  }
  &__option_form {
    @include grid-column(6);
  }
}

`@extend`して使いましょう

折衷案としてCSSフレームワークのクラスをextendして使う方法があります。

.search_bar {
  @extend .row;
}

といった感じで一個一個必要なクラスをextendして使います。
大変ですが、できないことはないでしょう。

この方法でも文書構造とスタイルを分離しながら便利なCSSを使うことができます。

まとめ

CSSフレームワークはお手軽にきれいなサイトができて素敵
でも文書構造とスタイルを分離できない
- それゆえ: コードがカオスになる
Mixinライブラリを使うなど工夫しましょう

以上、お読み頂きありがとうございました。
今後とも宜しくお願い致します。

補足

CSSフレームワークについてだけ書きましたが、以下のようなCSSを書いている場合も同じ話です。

.m05 { margin:   5px; }
.m10 { margin:  10px; }
.m15 { margin:  15px; } 
.p05 { padding:  5px; }
.p10 { padding: 10px; }
.p15 { padding: 15px; }

身に覚えがないですか？

お前ら今すぐそのCSSフレームワーク使うのやめろ!