PR：この記事にはアフィリエイトリンクが含まれます。
CSSは書き始めより、画面や担当者が増えた後に手強さが出ます。ボタンを直したら別ページも崩れた。そんな経験はありませんか。
BEMはクラス名で役割を示し、CSS Modulesはスタイルの適用範囲を絞ります。コンポーネント設計はUIを責務ごとに分割する考え方です。似て見えても、解決する課題は異なります。
ここでは三つの考え方を身近な例で整理し、関連書籍5冊の内容も紹介します。規則の数を増やすことが目的ではありません。あとから変更の影響を追いやすくするためです。
5冊の早見表
| 書籍 | 主なテーマ | 参考価格（税込） |
|---|---|---|
 CSS設計完全ガイド ～詳細解説＋実践的モジュール集 | BEM・PRECSSとUIモジュール | 3,608円 |
 ざっくりつかむ CSS設計 | BEM・SMACSS・ユーティリティなど | 3,168円 |
 Atomic Design ～堅牢で使いやすいUIを効率良く設計する | React・CSS Modules・UI分割 | 3,278円 |
 Tailwind CSS実践入門 | Utility-firstと既存CSSからの移行 | 3,740円 |
 Every Layout モジュラーなレスポンシブデザインを実現するCSS設計論 | レイアウトの再利用 | 2,970円 |
価格は税込の参考価格で、実際の販売額は時期や店によって変わります。購入時には各店の表示を確認してください。表の金額は内容を見比べる目安です。
CSS設計を扱う5冊でも焦点は異なります。クラス命名からレイアウトまで範囲が広く、スコープやUI部品にも触れています。いま困っている場面を思い出すと、実務と結びつきやすいでしょう。
たとえば、レビューでクラス名の付け方が議論になるならBEMが身近なテーマです。Reactの画面でスタイルが干渉するならCSS Modules、レスポンシブ対応に悩むならレイアウトの本が役立ちます。
CSSが崩れる理由
CSSはHTMLの要素にスタイルを適用します。広い範囲への指定や同じクラス名が増えるほど、どのルールが適用中なのか追いにくくなります。ページを増やした途端に問題が表面化する場合もあります。
たとえば複数ページで .button を使うと、購入ボタンの色を変えたときに検索フォームの送信ボタンまで変わることがあります。名前より、使う範囲を決めずに共有したことが原因です。
急いで上書きを足せばその場は整いますが、後から読む人には古い指定と新しい指定の関係が見えにくくなります。詳細度の高いセレクターや !important が増えると、小さな修正にも別の上書きが必要です。
保守しやすさを支えるのは、名前や適用範囲、部品の責務をチームで共有することです。すべてを抽象化する必要はありません。変更箇所から影響先を予測できる設計が実務では大切です。
命名が支える保守性
クラス名は書いた本人より、後から読む人への手がかりです。.list__item なら一覧内の項目と読めますが、.blue や .left では役割や変更理由が見えません。
BEMでは部品のまとまりをBlock、内部要素をElement、状態やバリエーションをModifierと区別します。すべてのクラスを長い名前にする必要はなく、構造が伝わる範囲で表記をそろえるのが現実的です。
命名規則を整えても、それだけで再利用が進むわけではありません。共通部品の基準やページ固有スタイルの置き場所もそろえておけば、ルールが形だけになりにくいでしょう。
コンポーネントの境界
コンポーネント設計では、画面を意味のある部品に分けます。ボタンやカードの小さなUIから検索フォームや商品一覧まで、役割と再利用の見込みに応じて単位を決めます。
HTML、スタイル、振る舞いを部品ごとにまとめれば、カードの変更が一覧画面全体に波及せずに済むことがあります。ただし、細かく分けすぎるとファイルを行き来する負担も増えます。適切な粒度が大事ですね。
分割の手がかりは、変更理由が共通かどうかです。ボタンの色と間隔をいつも一緒に変えるなら、同じ部品にまとめられます。一方、画面ごとに別々に変わるなら共有範囲を見直す頃合いです。
部品に分けるだけでは再利用しやすくなりません。受け取る値や状態、見た目の変え方が曖昧だと、利用側で上書きが増えます。部品の内と外の境界を明確にしておきましょう。
BEMを体系化
『CSS設計完全ガイド ～詳細解説＋実践的モジュール集』は512ページ。BEMとPRECSSを比べ、CSS設計を詳しく解説しています。ボタン、ラベル、カード、テーブルなど日常的なUIが題材です。
モジュールの組み合わせ例も載っており、画面への応用を想像しやすい構成です。スタイルガイドやレイアウト、開発ツールにも触れ、チームのCSSルールを整えたい人におすすめです。
初学者には厚めですが、BEMを実装例と一緒に学びたい人には有力な一冊です。具体的なモジュール設計を読みたい人や、既存のクラス名を整理したい人に勧めます。
現場を広く見る
『ざっくりつかむ CSS設計』は272ページの本で、全24章。BEMやSMACSS、ユーティリティファーストなどを短いトピックごとに扱います。現場で出会う設計手法を広く知るのに役立ちます。
間隔設計やスタイルガイドに加え、SassやAutoprefixer、PostCSSといった運用面も扱います。ReactやVue.jsを使う案件のCSS設計も含まれ、Web制作からフロントエンド開発へ進む人にも読みやすいでしょう。
ひとつの手法を深掘りするより、設計の論点を広く把握したい人におすすめです。現場に入ったばかりの人や、命名規則とビルド環境の関係を知りたい人にも役立ちます。
CSS Modules
『Atomic Design ～堅牢で使いやすいUIを効率良く設計する』は320ページ。Atomic DesignとReactを通して、UIの分割や階層化、再利用を学びます。CSS Modulesによるスタイルのスコープ化も扱っています。
部品の見た目を整える話に加え、どの粒度に分けてどう組み合わせるかを扱います。コンポーネントの保守やテストも含まれ、UIをコードの構造として学びたい人におすすめです。
ReactによるUIの分割基準とCSS Modulesをまとめて学ぶ人に適した一冊です。小さなUIから画面全体まで、階層の組み方を知りたい人は具体例を追いながら学べます。
Tailwind CSS
『Tailwind CSS実践入門』は2024年刊で384ページ。ユーティリティファーストを扱い、BEMやCSS Modulesをはじめ、Scoped CSSとCSS in JSとの比較も含みます。
コンポーネントの責務やインターフェース、スタイルの上書き方を解説しています。既存プロジェクトへの導入やCSSの衝突回避も扱うため、既存コードとの共存を検討できます。
Tailwind CSSの導入を考えているチームや、既存CSSを移行したい人におすすめです。導入時の設計方針や移行に伴う論点を押さえられる内容です。
レイアウト原則
『Every Layout モジュラーなレスポンシブデザインを実現するCSS設計論』は240ページ。StackやBox、Center、Gridなど12種類のレイアウトを扱います。組み合わせ可能なレイアウトの型に焦点を当てた本です。
ページごとの固定値に頼らず、要素の間隔や幅のルールを部品として扱います。画面幅が変わっても破綻しにくいレイアウトを考えるうえで、再利用の視点が得られます。
クラス命名やReactの構成を学ぶ本とは扱う領域が異なります。ページ全体に間隔や幅の指定が散らばっている人には、この本を勧めます。レスポンシブ対応を個別調整から見直す場合にも役立ちます。
結論
BEMはクラス名で役割を伝え、CSS Modulesはスタイルの適用範囲を整えます。コンポーネント設計はUIの変更単位を作り、レイアウトプリミティブは画面構造の再利用を支えます。それぞれの役割を分けて考えるのが出発点です。
ReactとCSS Modulesを学ぶなら『Atomic Design』、Tailwind導入を考えるなら『Tailwind CSS実践入門』がおすすめです。自分が改善したい部分を軸にすると、内容を実務に結びつけられます。
CSS全体の見取り図なら『ざっくりつかむ CSS設計』、BEMの実例なら『CSS設計完全ガイド』をおすすめします。レイアウトの再利用を学ぶ人には『Every Layout』が役立ちます。各価格は税込参考価格で、実売額は時期や店によって変わります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
