[書評] CSS設計の教科書

先週読んだ本が参考になったのでまとめてみました。

章の構成と内容

第1章で、CSSにおける設計とは、という前提と筆者のかたの考えを説明しています。
HTMLに依存しない、スタイルの上書きをしない、など後々の修正の影響が理解しやすいものをよしとしていることと、また早めに設計し実機で確認しながら作るアジャイル的なワークフローを用いることがフロントエンド側からできるアプローチだ、としています。

第2章では カスケーディングの仕組みと詳細度について、不用意に詳しい指定をしない(セレクタを短くする)ような整理(リファクタリング)のしかたを説明しています。

第3章ではコンポーネント設計のアイデアとして、基本的なコンセプトと各種法の方法を紹介しています。基本的な考え方として「関心の分離」というのがあり、コンポーネント単位で独立して作る(適度にカプセル化する)ことが重要としています。

- OOCSS
- SMACSS
- BEM
- MCSS
- FLOCSS

上記の5つについて、それぞれのパターンのコンポーネントレイヤーの分類と例示があります。
FLOCSSは谷さんが独自に作成しているものだそうです。

第4章ではコンポーネント設計の実践のための考え方を説明しています。Martin FowlerのRefactoringというプログラムの改善テクニックのカタログを引用して、CSSの改善のポイントをまとめているのが特徴です。
単一責任の原則や、開放/閉鎖の原則にもとづいた改善ポイントを説明した上で、再利用だけが全てではないとしています。
4−2ではボタンや見出しといった具体的な部品ごとの設計のパターンが例示としてまとめられています。

第5章〜第6章でははSASSなどのプリプロセッサなどを用いた開発手法やプロジェクトの管理についてまとめられています。
ここで命名規則におけるセマンティック性などチーム内で共有すべき考え方についても触れられています。スタイルガイドなどのドキュメントの自動生成ツールなどの紹介もあります。

最後の第7章で、WebComponentsを利用したHTMLを含めた部品のパッケージ化について説明があります。

書評

この本は、筆者の方のさまざまな経験をもとに、広い意味で設計の考え方としての整理と注意点がまとめられています。
ただ具体的な手法としてはこうするのが正しいという見解やベストプラクティスのようなものは提示されていません。

開発や運用で苦労された方にはその経験を整理したり見直す意味でとても本だと思いますが、
経験が浅い方がステップアップしたいときに、ああいうやり方もあるし、こういうのもある、という感じでモヤっとしてしまうかもしれません。

これは、そもそも設計に求められるものが要件よってさまざまであることと、その要件と手法を付きあわせた落とし所を見極める作業が必要だということだと思います。

より良い設計にたどり着くには、まず大事にすべきポイントを理解したうえで、自分の頭で考えたり、チームでディスカッションすることが重要だということを考えさせられます。

そういった勘所を養うためのガイドとして、チームで作っているプロダクトへの意識を育んでいくためにこの本は有用なのではないかと思いました。

自分的に良かったところ

OOCSSやSMACSSなどの違いを俯瞰して見られたのが個人的にはよかったです。

今の開発スタイルに近いのがSMACSSのレイヤー構造なのですが、そこにMCSSの考え方をブレンドできるとよさそうだと感じました。

SMACSSはModule、State、Themeといった機能的な分類で理解しやすいメリットがありますが、LayoutとModule、ModuleとStateなど判断が難しい場合がありました。
MCSSのいいところはFoundation(基礎)→Base(モジュール、パーツ、ステート)→Project(画面構成、レイアウト)→Cosmetic(その他)という具合に、レイヤーの分け方が開発工程に近いところだと思いました。

どちらかだけだと分担した時にムラがでたりカオスになってしまうので、2つの視点
があることで落とし所を議論したり判断しやすくなることを期待しています。