2014-10-26

書評: Web制作者のためのCSS設計の教科書

株式会社インプレス様より「Web制作者のためのCSS設計の教科書」を頂戴しました。
遅くなりましたが読んだ感想など。

内容について

Web制作者のためのシリーズ第3弾として出版された「Web制作者のためのCSS設計の教科書」です。

第1弾の「Web制作者のためのSassの教科書」、第2弾の「Web制作者のためのSublime Textの教科書」は初めての方向けの内容ではありますが、こちらは CSS はある程度分かっている方でないと少し難しい内容で、CSS を覚え始めるための本ではありません。

サブタイトルに「修正しやすいCSS」の設計手法とあるように、どのようにすれば修正や変更、追加に耐えうる CSS を書けるかということについて書かれています。

読み終わった感想

たくさんのヒントが詰め込まれているので、もう一段階上のレベルで CSS を書きたいと思っている方には特に読んでもらいたい一冊になっています。
この一言に尽きます。

書籍内で紹介されている例を基に、自分向け、所属している組織向けの効率のよい作業ルールなどを作っていくといいでしょう。

シンプルな HTML と CSS だけで完結できたとしても、新たに1ページ追加されただけでそれが破綻するようでは設計がうまいとは言えません。
シンプルにしつつ、修正や変更にも耐えられる CSS を書くというのは意外と難しいものです。
理想的な CSS を書くためには、想像力が求められます。
「もうちょっと想像していたらこんな面倒な思いをしなくてすんだのに」という場面に未だに遭遇します。
CSS 難しい。

「いい設計」についての思想を一気に取り入れようとするのは結構大変なことだと思うので、時間に余裕のあるプロジェクトで実践してみたり、過去の案件の CSS を再設計してみたりするとよいと思います。
個人的には、ゴールが見えている(作業途中で仕様変更がない)ので、過去の案件を再設計のほうがやりやすいと思います。

最後の方にはスタイルガイドについて書かれています。
僕はスタイルガイドを必要とされることはほとんどありませんが、「今書いている CSS はスタイルガイドが作れる内容なのか?」と考えてみると、いい設計ができているか把握しやすいのではないでしょうか。

余談

BEM の書き方が気持ち悪いという意見はよく聞きますし、僕自身も気持ち悪いと思っています。
ただ、なぜその気持ち悪い書き方をするようになったのかまで考えることで、気持ち悪さは軽減するかと思います(書籍内でも解説があるので、読めば軽減するかと)。
著者の谷さんが進めている FLOCSS も紹介されているので、それぞれの特長を確認して、取り入れてみるのもよいでしょう。
いずれの方法を採用もしくは取り入れるにしても、ちょっとした工夫で意図しない継承を起こさないようにすることが大事になると思います。