CSS Framework 使って .html が class まみれになってしまったので Sass extend でどうにかした

結論

Sass の @extend でどうにかしたというお話です

経緯

たとえば Bootstrap 使うと、往々にしてこうなる(なりやすい)

http://getbootstrap.com/css/#forms-controls の Inline checkboxes

<div id="checkboxes">
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  </label>
</div>

http://getbootstrap.com/css/#tables

<table id="report1" class="table table-bordered table-hover">
  <!-- ... -->
</table>

<table id="report2" class="table table-bordered table-hover">
  <!-- ... -->
</table>

<table id="report3" class="table table-bordered table-hover">
  <!-- ... -->
</table>

これくらいならまだ大丈夫そうだけど、なんかこういくらでも書けるのでいくらでも難読化される将来が見える。

参考

Please stop embedding Bootstrap classes in your HTML!

これやってみよう

実践

今回は bootstrap-sass を使って、Sass::Engine.new() とかやりましたが、別に Ruby 使う必要ないと思います。

そんなわけで、まずは sass

@import "bootstrap";

#checkboxes {
    label {
        @extend .checkbox-inline;
    }
}

#report1, #report2, #report3 {
    @extend .table;
    @extend .table-bordered;
    @extend .table-hover;
}

その結果 html がこう整理できる

<div id="checkboxes">
  <label> <!-- class="checkbox-inline" が消えた -->
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
  </label>
  <label>
    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  </label>
  <label>
    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  </label>
</div>

<table id="report1"> <!-- class="table table-bordered table-hover" が消えた -->
  <!-- ... -->
</table>

<table id="report2">
  <!-- ... -->
</table>

<table id="report3">
  <!-- ... -->
</table>

まとめ

CSS Framework 便利だけど、使い方(適用の仕方)からどうしても class="" の記述が増えてしまって、 .html がめっさごちゃごちゃするのどうにかしたかったので、ひとまず今回の対応をしました。 これだと CSS Framework 依存は .sass に閉じ込められるので、もし他の Framework に移行する時も少しは楽になるのかなーと思ったりしてます。

「この方がもっと楽いぜ!」みたいな案を募集しています。