このエントリは CSS Preprocessor Advent Calendar 2012 の4日目です。
さて、日頃モックアップやプロトタイプと呼ばれるものを作る時に、CSS Preprocessor ってIA（インフォメーションアーキテクト）にこそ便利なものなのでは？ とよく思う。今回はそのことを書きたい。要するにコードとか技術的なあれこれは一切出てこないお話。
CSS Preprocessor を使用するメリットおさらい
先人のブログから引用しておさらいをする。
セレクタの構造をわかりやすくできる
変数を利用して特定値をキーワード化できる
ベンダープレフィックスを付与できる
汎用的なスタイルを再利用できる
制作の工数が減る
運用が楽になる
クオリティが一定になる
メリットがいっぱいあることがわかる。
CSS Preprocessor がIAと親和性が高い理由
IAのスキルセットのひとつに「データの持っているパターンを整理し、複雑なものをわかりやすくする人」ということがある。
※そのあたりの詳しいことは @magi1125 さんが公開している『マークアップエンジニアと情報アーキテクチャ』あたりを参考にしていただければと思う。
現実的には、モジュールやコンポーネント（必要要素パターン、パターンのカバーする範囲、組み合わせの際の構造設計）をフロントエンドエンジニアが行なっている状態も多いのではないだろうか。
しかし、コンポーネント定義はIAが行うのが理想。かつ、それをデザイナーやフロントエンドエンジニアに伝達し、実装後にそれが維持されているかを確認するところまでが仕事。
CSS Preprocessor の利点を活かせばコンポーネントの構造を定義しやすいし、それ自体が共通言語となるために伝達が容易になる。そんなこんなの理由から、IAのスキルセット・コンポーネント定義、両方と相性がいいと思うのだ。
具体的にはどうすればいいか
CSS Preprocessor そのものを共通ドキュメントにしてしまう？
内部にコメントたくさん書けるので、SCSSそのものをガイドドキュメント化しちゃうのもありかなぁと考える。ただし大規模プロジェクトだとさすがに難しそうにも思う。小規模プロジェクトなら、ドキュメントのメンテコストを低減することができそうかも？
CSS Preprocessor を導入してモックアップを作ってみる？
パワポやツールを利用してワイヤーを書くのも便利だが、CSS Preprocessor の利点を活かしてモックを作ってしまうのも手だと思う。
モックを作る時には紙やツールの上で行う時よりもきちんとしたコンポーネント設計・管理ができていないと破綻する。早い時点で綻びに気付くことができるのはアドバンテージ（すくなくとも、フロントエンドエンジニアに「これ無理でしょ」と指摘される前にわかる）。
とにかく CSS Preprocessor すてき
上記で挙げたものはあくまでアイディアベースでしかないのだが、わりと現実的に導入しやすいケースではないかと思っている。
エンジニア・デザイナーとの共通言語を手に入れた上に、プロジェクト終盤に予想される手戻りを防ぐことができるなんて、すてき。その分エンジニア・デザイナーはより細部に手がかけられるようになるわけで、すてき。CSS Preprocessor って超すてき。
どう適用・応用していくかはチームごとに違うので、楽しんで導入できる形を見つけるのがいいと思う。
※このエントリは CSS Preprocessor Advent Calendar 2012 に参加しています。
