新規JekyllプロジェクトにBourbon, Neat, Bittersをインストールして作業したら、とても快適だった。
Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. – Bitters
という説明の通り、新規プロジェクトがスタートダッシュできる感覚。最初からやりたいことに集中できる。
Bootstrapではスタートダッシュできるけど使い捨てのコードになりがち。ところが、Bittersのコードは長期的なメンテナンスにも耐えうる（はずだと筆者は判断している）。
- コンテンツファースト
- アクセシビリティファースト
- モバイルファースト
- インブラウザーデザイン
といった考え方や手法を取り入れている制作者にはフィットすると思う。
やりたいこと
インブラウザーデザインかつコンテンツファーストで制作する。
まずはコンテンツを揃えて、ガシガシとマークアップしていく。
それができたらレイアウトや個別のスタイルを調整していく。
Bootstrap等でのやりかた
Bootstrapで同じことをやろうとしたら、例えば「Sublime TextにBootstrapスニペットをインストールする」「スニペットをガシガシ入力していく」といった手法になる。
これでは意味論的に不要なタグが量産されてしまう。
構造を変えようとしたら、フレームワークの中身を調べないといけない。
長期的に運営するサイト（例えばブログ）では、メンテナンスコストが大きいので、採用しにくい。
そもそもマークアップにゴミが多すぎて、アクセシビリティの観点からは気持ち悪い。
何が悪かったのか
根本的な間違いは、「HTMLがCSSフレームワークに依存している」ことにある。
依存関係は逆でなければならない。
つまり、「HTMLはCSSに依存しない」で「CSSがHTMLに依存する」ようにしなければならない。
Bootstrapのクソマークアップ問題
Bootstrapでは、class属性にカラム数などのスタイル指定を書くようになっている。
これは「スタイルと文書構造の分離」という原則に反している。何のために外部CSSファイルを使っているのかわからない。
このような状況を、個人的に「クソマークアップ問題」と呼んでいる。
追記：いちおうBootstrap関係者の名誉のために補足しておくと、make-row()とmake-*-columns()というmixinを使えばいいということになっている。しかし、私の知るかぎり「Bootstrapではクソマークアップが氾濫している」ように見える。この問題には深入りしないが。
Bourbon/Neat/Bittersの使いやすさ
いま実際に自分のJekyllブログサイトをBourbon/Neat/Bittersで制作している。「本来やりたかったこと」ができており、気持ちいい。
Neatは特定のマークアップ構造を前提としない。だから、「HTMLファースト」で、とりあえずはスタイルを気にせずに、ガシガシとマークアップしていくことができる。
複数人での作業分担にもメリットがある。ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略で書いたイメージに近いが、「CSSとスタイルガイド（後述のRefillsに相当）を納品物と定義しつつ、アートディレクションを発注する」という具合に役割分担しやすい。
Bourbon/Neat/Bitters/Refillsのアーキテクチャ
Bourbon/Neat/Bitters/Refills自体のアーキテクチャもよく考えられていて、きれいにモジュラー化、レイヤー化されている。
BourbonをもとにNeatが作られ、その上にBittersが作られている。RefillsはBittersベースのスタイルガイド兼サンプルコードカタログになっている。
公式サイトから引用すると：
となっている。
美しいアーキテクチャだと思う。これを設計したthoughtbotの人たちはすごい。
今後の展望
Drupalのようなモジュラリティの高いアーキテクチャのCMSと組み合わせて使うと相性がよいのではないかと思うので、機会があったら検討してみたい。
最近Stylusも気になっていて、kouto-swissも試してみたい。
参考：Stylus 用の Bourbon ライクな CSS フレームワーク kouto swiss を使ってみる - Qiita
追記：2015年2月22日
サイトリニューアルのお知らせ 思想と手法についてに書いたとおり、Bittersを使いました。
それで分かったのですが、素晴らしいのはBourbon Neatのほうです。Bittersのほうは、「絶賛するほど素晴らしいとは言えないな」という評価に変わりました。
新規プロジェクトがスタートダッシュできる感覚。最初からやりたいことに集中できる。
という言葉を訂正する必要はないのですが、改造しにくかったです。
ですので、今後はこうしようと思います：
- 最初はBittersでBourbon Neatプロジェクトを立ち上げる。
- ある程度形になったらリファクタリングする。
- Bittersが原型を留めない状態になり、いわばプレイン(plain) Bourbon Neat なSassコードになる。
Bourbon/Neat/Bitters/Refillsというレイヤー構造のアーキテクチャは素晴らしく綺麗なのですが、Bitters自体の内部アーキテクチャはそれほど綺麗ではなかったなあ、ということが分かりました。