キタジマタカシ 
Mimizuku Advent Calendar 7日目の記事です（そろそろ誰か参加しても良いのよ…）。今日から数日は CSS に関連する話を書いていきたいと思います。今日は CSS フレームワークの選定について。
Bootstrap
Habakiri では Bootstrap を使用していました。デファクトスタンダードといってもいいくらい普及していますし、自分自身も慣れていたためです。
実際に使ってみて、はじめのうちは良かったのですが、だんだんとストレスに感じる部分がでてきました。スタイルの指定が濃すぎるなと感じるようになってきたのです。例えば Bootstrap で主要なボタンを配置する場合、<a class="btn btn-primary">ボタン</a>という感じになりますが、この場合、青くて枠線付きのボタンが配置されることになります。管理画面とかならそのままでも良い場面も少なくないかもしれませんが、受託の Web サイトの場合だとほぼほぼそのまま使えるということはなく、サイトのメインカラーとかテイストなどにあわせてスタイルを上書きしなければいけません。この上書きという作業が実にめんどくさい。
「いや、Bootstrap の CSS をそのまま使わずにその前段階の LESS や Sass の変数でうまいことやれよ」という意見があるのはわかります。僕もそう思います。ただ、Habakiri は公式テーマディレクトリに掲載する前提で作ったので基本的にコンパイル済みの CSS がロードされますし、当時は Mimizuku でやっているほど CSS （+ その前段階のファイル）を効率よく管理するには、みたいなことを考えていなかったので作りも甘かったのですね。
とはいっても、それを差し引いても Bootstrap のコンポーネントのスタイル指定は濃いと思いますし（これについては Bootstrap が悪いとは全く思っていなくて、簡潔に言えば目的のミスマッチだと思っています）、そもそも Sass 段階の構造も僕には複雑に感じられて、深く追う気にはなれませんでした。じゃあいっそ僕の目的にマッチする、最低限の構造だけを定義した CSS フレームワークを作ってしまおう！ということで Basis を作り始め、Mimizuku ではそちらを使用することにしたのです。
Basis
Basis は Bootstrap ほどスタイルしていが濃くない CSS フレームワークです。コンポーネントとして成立する最低限の構造だけを提供しようという思想なので、ほとんどのコンポーネントで色の指定や枠線の指定はありません（無いと成立しない場合は入れています）。そのため、Bootstrap のようにコンポーネントを配置するだけで（見た目は別として）ワイヤーフレームであったりモックとして完成できる、ということありません。僕の仕事は「先にデザイナーさんがデザインをつくり、それをコーディングして画面で見れるようにする」というものが多いのでそのほうがマッチしやすかったということですね。
また、生 CSS をそのまま使うから上書きしないといけない状況が増えるわけなので、Mimizuku では子テーマから Mimizuku の CSS をそのまま使うという仕組みをばっさり切りました。Basis、および Mimizuku のスタイルは Stylus で記述されていて、基本的に Mimizuku の子テーマからはその Stylus ファイルを import して使う設計です。Basis はコンポーネントのセレクタに対するスタイル指定も Bootstrap よりはかなり薄いですが、その前段階の placeholder、さらにその前段階の mixin（Basis では abstract と呼んでいます）ではさらに薄いスタイルを提供しています。そのため、デフォルトのコンポーネントのスタイルはまだ余分だよ、という方は placeholder や abstract を使うことでさらに無駄な上書きの頻度を減らせるという寸法です。
さらに、Basis はより簡潔にスタイルを指定できるようにしたり、バーティカルリズムを自動化させたりするために便利な mixin や function を提供しているので、生 CSS ではなく Stylus ファイルを使用することでそれらの便利機能も使用できます。
まとめ
以上が Boostrap をやめて Basis にした理由でした。明日は「なぜ Basis・Mimizuku は Sass ではなく Stylus なのか」ということについて書きます。ではではー
