Web制作者のためのCSS設計の教科書を読んだ

久しぶりに仕事で Web 側の view を作っていて web のフロントエンドの技術からだいぶ遅れてしまっていたことを実感したので、キャッチアップするために以下の本を読みました。

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

例によって PDF が欲しかったので達人出版会で買いましたが、ちょうどポチった翌日から kindle 版が半額以下になるという悲しい現実。(いや、でもどうせ PDF が欲しかったのできっとどちらにせよ達人出版会で買ったと思いますが...。)

以下感想です。

どんな本？

CSS の "設計" について書かれた本です。

フロントエンドの "設計" というと JavaScript のことと勘違いしがちですが、CSS も無秩序にセレクタを書いていくとあっという間に破綻してあちこち意図しない見た目になってしまいますよね。 サービスをリリースした経験がある方のほとんどはこんな経験を一度はされていると思います。

最近は sass とか less があるので途中まではそれなりにうまくモジュールに切り分けて整理できていても、そのうち「なんでこのセレクタが優先されちゃうの？」とか「こっちにはこのスタイル効いて欲しくないのに！」って困るのはあるあるネタだと思います。

その辺のよくあるやりがちな間違いをきちんと実例を挙げながら原因を解説するところから始めて、最近よく聞く OOCSS とか BEM とか SMACSS とかの CSS の設計技法についても満遍なくフラットに解説してくれている本です。 また、SASS を使った設計方法についても記述があるので Rails 使いの人にとってもすぐ役立つ知識をすっきりと手に入れられる本です。

最後には Web Components についても概要を紹介してくれています。

どんな人にオススメ？

CSS の本だからと言ってコーダーとかデザイナ向けだと勘違いしてしまうと損です。むしろプログラマにオススメです。 特にフロントエンドにあまり縁がなかったバックエンドを主に扱っているプログラマにとっては、プログラマ的な考え方で CSS を整理するという観念とその設計の手がかりを得ることができるので、CSS に対する苦手意識や「なんとなくわかってるけど、よくわからない」感をだいぶ減らせると思います。

「Bootstrap のカスタマイズで十分間に合うから CSS を一から自分で書くとかほとんどしないしー」っていう方も、この本を読了すればどうして Bootstrap があのような設計で作られているのかがなんとなく理解できて、Bootstrap ってよくできているんだなぁと実感できるようになると思います。

僕も以前は「Bootstrap を使うとなんか HTML の class が bootstrap 臭くなって汚れる」とか思っていた方なのですが、Web アプリの CSS の設計という観点から見て非常に綺麗によくできているフレームワークなんだな、としみじみ感じさせられました。

あとは BEM とか SMACSS とか最近話題だからちょっと調べてはみたけど、あまり具体的なメリットがわからないな、っていう方は是非読んでみてください。 @ken_c_lo さん曰く、それぞれのフレームワークについてこれだけ網羅してきちんとわかりやすく書いてあるものは存在しない、とのことなのでデザイナさんのお墨付きと言っても過言ではないと思います。

あとは実案件でどうやってこの知識を活かせるか試すのみですが、「sass でなんとなくページごとにファイル分けときゃいいんじゃない？」なんて思っていた頃よりはきっと納得のいく設計ができるようになっていると思います。がんばります。

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