「CSS設計完全ガイド」を買ってみた

「CSS設計完全ガイド」を読んでみた感想

CSS設計で既存のOOCSSやSMACSの手法を紹介しつつ、独自の「PRECSS」という設計をほかの手法と比較したり、ボタンやナビ、カード型のデザインでの利用など、様々なパターンで具体的な例にだして説明されています。CSSの設計において難しく、かつ悩ましいモジュールの粒度に関しても詳細にわかりやすく記載がされています。

PRECSSは下記にあるような思想で作られており、かなり利用しやすいのではないかと感じました。

• 全てに接頭辞を付加：接頭辞を見て役割、スコープを把握
• シンプルな命名規則：クラス名は全てスネークケースとキャメルケースの混成で構成
• 親しみやすい設計：OOCSSやSMACSS、BEMなど既存の思想が基になっている
• 他種族との共存：自分自身が書いたクラス、CMSやCSSフレームワークが出力したクラスと明確に区別することができる
• 拡張可能：スマートフォンなどの場合のみに有効なクラスが必要になった場合は、「.sm_**」という接頭辞を持つグループを作って拡張することができる

CSSの設計だけでなくボタン内のフォントサイズが変わった際のスペースのとり方で、なぜemで利用するのかなど、プロパティや値の論理的な説明がとても有用に感じました。

まとめ

• 「PRECSS」という独自の設計を紹介している。
• 設計内容が明確。
• 具体的な例をだして設計手法を説明している。
• 設計だけでなくCSSのプロパティや値の利用などを論理的に説明している

長年CSSの設計に苦労しているので、ある程度CSSの設計手法は知っているつもりでしたが、「CSS設計完全ガイド」で「PRECSS」という設計を初めて知りました。今までは「FLOCSS」という手法で設計を行っていたのですが、「PRECSS」を試してみたいと思わせる内容でした。

自分のなかでモジュールの粒度の方針を決められそうな記載がされていたので、CSSの設計書としては私が愛用している「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」と同じくらい好きな書籍になりそうです。