CSS 設計完全ガイド 〜詳細解説＋実践的モジュール集(シーエスエスセッケイカンゼンガイド ショウサイカイセツ ジッセンテキモジュールシュウ)

CSS 設計は多くの現場で導入されていますが、いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
そこで本書は、 CSS のさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化します。そのうえでボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、さらにはそれらの組み合わせ方まで、実践的なコードを紹介します。
代表的な設計手法である「 BEM 」と、著者が開発した設計手法「 PRECSS 」によって対比的な解説を加えており、思考をなぞることで最適解が炙り出されることでしょう。
駆け出しのウェブ開発者、フロントエンドエンジニアの方に、ぜひ読んでいただきたい 1 冊です。

CSS は書き方を覚えること自体は難しくないのに、プロジェクトが大きくなるにつれてスタイルが衝突し、修正のたびに予期せぬ場所が崩れる。本書はそうした「 CSS が壊れる問題」に設計の観点から体系的に向き合う一冊です。著者の半田惇志氏は BEM 、 SMACSS 、 FLOCSS 、 ITCSS など代表的な CSS 設計手法を横並びで解説し、それぞれの思想・適用場面・トレードオフを整理しています。

単なる手法カタログに終わらず、コンポーネント単位でスタイルを閉じ込める設計思想そのものを丁寧に掘り下げている点が特徴です。命名規則をなぜ守るのか、レイヤーを分けると何が嬉しいのかという「なぜ」が一貫して語られるため、特定の手法に固執するのではなく、プロジェクトの規模やチーム構成に応じた選択ができるようになります。

CSS-in-JS やユーティリティファースト (Tailwind CSS 等) の普及により CSS の書き方は多様化していますが、本書で扱う「スタイルのスコープを制御し、意図しない副作用を防ぐ」という原則は実装手段が変わっても有効です。生の CSS でもフレームワークの上でも使える、設計の判断軸を手に入れたい人に向いています。