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

4.5
ブログ

CSSの設計方法を学習するために「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」の設計手法」と同じくらい好きな書籍になりそうです。

スポンサーリンク
ブログ
ボヘミアンをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
PC ウェブログ

コメント