これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス
上のリンク先で言われていることは大体みんなやってきたことなんじゃないかと思います。一人でやる案件なら別に意識するまでもなくやれるでしょうが、複数名でやると簡単に泥沼になるのがWeb制作の現場なので、単にコンポーネント化といってもどこに気を付けてやるべきかを熟考しなければなりません。
コンポーネント化の範囲をどうするか
今私がやっているのは「機能単位」でのコンポーネント化です。ただ、これが最適解かどうかは結論が出ていません。たぶん、これが最善と思ってはいますが。
コンポーネント化の単位として考えられるのは以下のパターンです。
- レイアウト単位
- 機能単位
- 装飾単位
レイアウト単位のコンポーネント
代表的なものはグリッドレイアウトです。12グリッド、n/mグリッドが主なパターンになるでしょう。12グリッドはカラム分割や複数枚の画像＋記事の回り込みなどといったレイアウトには最適ですが、ヘッダーに横並びの等幅分割でグローバルメニューを設置するような場合はあまり向いていません。
機能単位のコンポーネント
横並びグローバルメニューや、カードモジュールのようなあらかじめ決まった形でそこにしか使わないようなものはまとめてしまう。
装飾単位のコンポーネント
色違いのボタンなど
コンポーネント化の落とし穴
全部入りの欠点
上記の3種のコンポーネントは、Bootstrapなどの大規模CSSフレームワークでは最初から入っています。Bootstrapのようなものを自分で作ろうとすると痛感しますが、非常に考え抜かれたコンポーネントであることが分かります。
なら黙って有名どころのフレームワークを使えばいいじゃん、となるのですが、そういうわけにもいかないのがWeb屋のジレンマです。（私もBootstrapは一度だけ試しに使いましたが、以降は自前でグリッドを用意するようになりました）
全部入りの欠点は、CSSファイルの肥大化が挙げられます。Bootstrapの機能の8割は使わない、という人も多いのではないでしょうか。「パフォーマンス」の御旗のもとにCSSやJavaScriptファイルのミニファイなどという涙ぐましい努力を推奨される一方で、こんな無駄が許されるのか、という問題はついて回ります。
レイアウトのみのコンポーネントは無駄がない
一方、グリッドシステムだけが用意されているような場合は、無駄がありませんが、制作時に作らなければならないものが多く、スピードが損なわれます。
バランスをどこで見極めるか、が大事
CSSのモジュール化を進めると、必ずどこかで無駄と不足が発生します。不足をなくせばCSSは肥大化し、CSSの無駄と不足を最小にしようとするとクラスが細分化され、今度はHTML側の負担が増えます。これではHTML3の時代と同じじゃないか、ということになりかねません。
上流のCSS設計がまずいとこういう大変なことになるのですが、CSS設計の勘所というのは場数を踏む（そしてあとでまずかったところを把握する）必要があります。
のんびり場数を踏む余裕がない場合は以下の方法が効率的です。
Bootstrapなどのコードを読む
セマンティックな名付け、コーディングのテクニックなどを学ぶことができます。フレームワークは大手のウェブサービス会社が公開しているので、いくつか目を通しておくと、いろいろな設計思想が学べて効果的です。特にBootstrap、Foundation、Pureは勉強になります。
BEMを使ってみる
名づけのルールがBase, Element, Modifierとなっており、上記のコンポーネント化の目安となります。
最初のうちは深くしすぎるなどの失敗をするので練習用のサイトを用意して何回か試行錯誤すると勘所がわかるようになります。
BEMのルール上は__,--を何段にしてもよいみたいですが、3段くらいを限度にするとちょうど良いかなー、という印象です。
そして、導入する、ではなく使ってみる、というのがポイント。一度「このあたりがコンポーネントの境界だな」というのがわかれば、名づけをBEM方式にこだわる必要はありません。
