概要

BEMとPRECSSの対比でCSSモジュール設計の判断軸を実践的に習得する

想定読者

HTMLとCSSの基礎は押さえているが、チームで通用する設計手法を体系的に学んでいない駆け出しフロントエンドエンジニア、またはサーバーサイド出身でフロント業務を担うことになった開発者

こんな人には向いていない

• BEMやFLOCSS等のCSS設計手法を本番プロジェクトですでに運用経験のある中・上級フロントエンドエンジニアには、扱う内容の大半が既知となる可能性が高い
• CSS-in-JSやTailwind CSSのユーティリティファーストアプローチを前提とするチームには、本書の設計前提が異なるため適合しにくい

この本で身につくこと

• BEMのブロック・エレメント・モディファイアの命名規則を実コードに適用できる
• 著者が開発したPRECSSの構造とBEMとの選択判断基準を理解できる
• ボタン・ラベル・カード・テーブル等の定番UIモジュールをCSS設計原則に従って実装できる
• プロジェクトの規模・性質に応じてCSS設計手法を選択する判断軸を持てる
• モジュールの組み合わせ方とファイル分割・管理の実践的パターンを習得できる

ハイライト(外部からの言及)

代表的な設計手法である「BEM」と、著者が開発した設計手法「PRECSS」によって対比的な解説を加えており、思考をなぞることで最適解が炙り出されることでしょう — 出典

「なぜこの手法を選ぶか」という設計判断の根拠を対比形式で提供する本書の独自性が端的に表れた記述

業務では BEM 記法を利用しているので、 BEM を中心に理解しました。クラス名に規則を持たせるだけでも CSS を一気に管理しやすくなります。 — 出典

サーバーサイド出身者が実務でBEMを採用し、命名規則の導入だけでCSSの管理品質が改善したと証言する実務適用の視点。既存ハイライトの「設計思想の対比」と異なり、現場で即日使える効果を示す

挫折を経て、CSS設計を一から勉強しなおさないと思っていた時に以下の本に出会い、PRECSSを知り、PRECSSの学習を通して前回の疑問点/失敗に対する解を得られたため、本記事ではそこを中心に記述する。 — 出典

FLOCSS運用で行き詰まった開発者が本書のPRECSS解説によって具体的な疑問を解消した体験談。「設計で詰まった人が本書で活路を開いた」という購入判断に直結する問題解決の角度を加える

読了後にできること

Before(読む前): FLOCSSなどの設計手法を試みたが運用中に判断に詰まり、どのルールに従えばよいか言語化できなかった

After(読み終えた後): BEM/PRECSSの設計思想を理解することで、自プロジェクトの性質に合った設計判断の根拠を説明しながら実装できる

章立て

第1章 CSSの歴史と問題点

なぜ CSS 設計が必要なのかを歴史軸で示す導入章

第2章 CSS設計の基本と実践

CSS 設計の 4 つのポイント(予測可能性・再利用性・保守性・拡張性)

第3章 さまざまな設計手法

OOCSS / SMACSS / BEM / FLOCSS の比較。プロジェクト方針決定の判断材料

第4章 レイアウトの設計

ページ全体の骨格とグリッドを扱う章。後続のモジュール集との役割分担を理解するため、モジュール設計に入る前に通読しておくと設計の適用範囲が明確になる

第5章 CSS設計モジュール集① 最小モジュール

ボタン / タグ / バッジなど。実務でそのまま使える設計レシピ

第6章 CSS設計モジュール集② 複合モジュール

カードやメディアブロックなど複数の最小モジュールを組み合わせた構造体の設計例を扱う。第5章の最小モジュールを把握した後に読むと、組み合わせ方の依存関係が理解しやすい

第7章 CSS設計モジュール集③ モジュールの再利用

Modifier の使い分け。本書最大の独自性が出る章

第8章 CSS設計をより活かすためのスタイルガイド

設計ルールをドキュメント化してチームで共有するスタイルガイドの構築方法を扱う。新メンバーへのルール伝達や設計の属人化防止を課題とするチームに実務価値が高い

第9章 CSS開発に役立つその他の技術

Sass / PostCSS / Stylelint。設計と組み合わせて使うツール群

関連記事 / 参考情報

• 【2021年版】サーバーサイドエンジニアがVue.jsでモダンフロントエンド開発を始めるまで — サーバーサイド出身者のフロントエンド学習ロードマップで、CSS設計の基礎書として本書を推薦
• 改めて学び直すCSS — CSSを体系的に学び直す文脈で、設計手法の整理に役立つ参考書として紹介
• 実務未経験者が今まで独学に使ってきた技術書を公開していくよ — 実務未経験の独学者がCSS設計の習得に活用した技術書として言及
• 1年目にやったおすすめ教材 — エンジニア1年目の推薦教材リストでCSS設計の入門書として紹介
• 理想と現実のCSS設計 — CSS設計の実務での理想と現実のギャップを考察した記事で本書を参照
• 1年前に素人がFLOCSS使って直面した疑問/失敗に対し、PRECSSを学んで解消 / 前進できた話 — FLOCSS運用の行き詰まりをPRECSS学習で打開した体験談。本書のPRECSS解説を実践適用した経緯を記録

学習のヒント

• BEMとPRECSSの対比を追う場合、BEM章を一通り読み終えてからPRECSS章に移ると比較対象が明確になり理解が速い。2つの手法を同時進行で読み進めると混乱しやすい
• モジュール集の章(ボタン・カード・テーブル等)は通読よりも、実装したいコンポーネントが生じた際にリファレンスとして開く使い方が実務では効果的
• 既存プロジェクトに適用する前に、冒頭の設計手法選択ポイントを自プロジェクトの性質(チーム規模・HTML生成方法・更新頻度)と照合しておくと、後から「手法を変えたい」という状況を防げる

前提知識

• HTMLの基本構造とCSSのセレクタ・カスケーディングの仕組みを理解していること
• FlexboxまたはGridを使った基本的なレイアウト実装の経験があること

次に読む本

Sass/SCSSを活用したCSS管理の実践書

本書はCSSクラス設計の命名・構造を対象としており、変数管理・mixin・ネストなどのプリプロセッサ機能は扱わない。設計ルールをコードレベルで運用可能にする段階でSass/SCSSを組み合わせると、本書の設計思想が実装基盤として定着する

Vue.js / Reactのコンポーネント設計書

本書はHTMLとCSSの設計に特化しており、コンポーネント単位でJSロジックとスタイルを管理するVue.js/Reactの設計思想は別途必要になる。CSS ModulesやCSS-in-JSとBEM的命名の差分を意識しながら読むと、本書の知識が次の技術スタックへ接続しやすい