サイバーエージェント社でフロントエンドエンジニアとしてご活躍の谷 拓樹氏 （@hiloki） 著による 「Web 制作者のための CSS 設計の教科書」 をインプレス様よりご恵贈いただいたので紹介です。
ちゃんと CSS を書くためのヒントがたくさん
CSS は言語的に大して複雑ではないため、単純に見た目を再現すればよいというだけであればほぼ誰でも書けますが、数百から数千ページにおよぶ大規模な Web サイトや、頻繁に機能追加などの改修が行われる Web アプリケーションにおいて、あるいは複数人でソースコードのメンテナンスを行わなければならないような現場において、ソースコードがわかりやすく、再利用や拡張を含めてメンテナンスしやすい CSS を書くには、かなりの経験と能力が必要です。
本書は、そういったレベルで 「ちゃんとした CSS を書く」 ためのノウハウや、ヒントが詰まった良書だと思います。業務として CSS を書く人にとっては今や必須と思われる考え方、知識をかなりわかりやすく解説してくれていますので、まだ開発経験が浅いと自身で感じている方でも読みやすいです。というかそういう人こそ早いうちに読んでおいた方がよいと思います。
人のノウハウをどのように自分なりに取り込むか
経験のあるエンジニアさん （フロントエンドエンジニアに限らずですが） は、どのようにコードを書けば他人が見てもわかりやすく、ミスが起こりにくいのか、再利用や拡張時に効率がよいのかといったノウハウを、その豊富な実装経験 （もちろん失敗も含めて） から自分なりに蓄積しているものです。
本書や、本書内でも紹介されている、SMACSS - Scalable and Modular Architecture for CSS をはじめとした考え方もそうですが、そういった自身の経験から得られたベストプラクティスを言語化してくれることで、他のフロントエンドエンジニアは自分で同じだけの経験を積まなくても、経験豊富な方々が導き出したベストプラクティスに触れることができるというのはありがたいことです。
しかし、本書でも書かれていますが、単純に他人のアイデアを鵜呑みにするだけでなく、自身のかかわるプロジェクトの特性や開発・運用環境などに応じて、自分なりのベストな設計手法を考えるということが重要です。
そのために本書では第 3 章でメジャーな設計手法やアイデアをいくつか紹介した上で、著者が自ら作成する設計ガイドライン、「FLOCSS」 にそれらがどのように取り入れられているのかについても解説されていますが、これは 「人のアイデアをどうやって自分なりに取り込むのか」 という部分のよい参考になると思います。
具体的な手法から運用面まで幅広く解説
その他、第 4 章では具体的なソースコードに落とし込みながら、コンポーネント化していく手法、さらに第 5 章では CSS プリプロセッサを使用したコンポーネント設計と管理の手法について解説されているほか、第 6 章では運用面、スタイルガイドなどドキュメントの作成についてまでしっかりと触れられています。
最後の第 7 章に関してはすこしおまけ的に、Web Components に触れられていますが、Web Components は本書で話題の中心としているコンポーネント化による CSS の再利用性やメンテナンス性の向上という考え方の進化型であり、近いうちに Web サイトや Web アプリケーションの開発効率を飛躍的に向上させてくれるでしょう。
本書では Web Components の基本的な知識についてわかりやすく触れてくれていますので、Web Components に関する理解を深めるよいきっかけになるかもしれません。
ということで、いただいてから少し時間が経ってしまいましたが、お盆休みに積んでいた書籍をまとめて一気に読んだので、この時期の紹介になってしまいました。聞くところによると重版も決まったそうで。おめでとうございます。
