【書評】「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」を読みました。

著者である谷さん(@hiloki)より、巷で話題のメロン本(ミドリ本)である「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」をいただきました。

CSS設計のケーススタディーを学ぶことができる書籍です。本書の構成は次のようになっています。

  • 第1章 CSSにおける設計とは
  • 第2章 CSSの基本を振り返る
  • 第3章 コンポーネント設計のアイデア
  • 第4章 コンポーネント設計の実践
  • 第5章 CSSプリプロセッサを用いた設計と管理
  • 第6章 コンポーネントの運用に必要なツール
  • 第7章 Web Componentsの可能性

基本を知る

基本といってもCSSとは何かという話ではなく、CSS設計とはどういったものか、設計前にどういったことを考えればよいかなどのヒントを1章と2章で得ることができます。

設計のアイデアと実践

CSS設計の思想として、OOCSSSMACSSBEM、最近はMCSSもでてきていますが、こういった設計のアイデアをよく聞くと思います。聞いたことあるけど、どういったことなのかよく分からない人は3章でこれらのことを簡潔に解説をしています。

4章は完全に実践向けです。恐らく著者の経験から得たことを中心に書かれているものと思いますので説得力があります。とはいえ、たまに矛盾を感じる部分はありますが、3章で紹介のあった思想とこの章で書かれている内容を参考にすることで、今後の設計のヒントとして非常に活用できるでしょう。また5章ではCSSプリプロセッサのことが書かれていますので、5章も合わせて読むとよいです。

スタイルガイド

6章では運用の内容です。サイト運用をしていく中でちゃんと管理をされていない場合やルールが無い場合において、運用フェーズのなかで大きな不都合に遭遇する確率が高くなります。

そうならないためにもちゃんと設計することが大切なのですが、運用ルールを定める上でひとつ役に立つのが、 スタイルガイドです。

スタイルガイドとはどういったものかという解説に加え、有名なサイトのスタイルガイドの紹介。そして、実際にスタイルガイドを作成するということは非常に時間と労力が必要になります。しかし、ツールを使うことで簡単にスタイルガイドを作成することができたりします。
そういった非常に便利なスタイルガイド作成ツールを紹介してくれています。

Web Components

最後の7章は、Web Componentsの話です。Web Componentsとはどういったものなのかという解説とまだ先の話にはなるのですが、実際に案件で使えるようになった場合にWeb ComponentsがもたらすCSS設計の可能性などが書かれています。きっとこの章を読むことでWeb Componentsに興味が湧くことでしょう。

最後に

本書はCSSど初心者には全くもって参考になりません。普段、案件でCSSを書いている人向けです。その案件が大規模だろうが中規模だろうがメンテナブルなCSSになるように設計を意識してCSSを書くという心構えとして読むことを強くオススメします。

最後に、こんな素晴らしい著書をいただきました著者の谷さんと版元である株式会社インプレス様に感謝します、ありがとうございました。