CSS 設計完全ガイド 〜詳細解説＋実践的モジュール集

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

CSS の指定が増えるほど、ある画面の修正が別の画面を崩すという問題は避けにくくなります。『CSS 設計完全ガイド』 (半田惇志 著、技術評論社、2020 年 2 月刊) は、その対策としての CSS 設計を、さまざまな設計手法の紹介と考え方の整理から始め、ボタンやラベル、カード、テーブルといったウェブの定番モジュールの実践的なコードまで通して解説する書籍です。副題は「詳細解説＋実践的モジュール集」で、版元の発売日は 2020 年 2 月 27 日です。版元は「駆け出しのウェブ開発者、フロントエンドエンジニアの方」に読んでほしい本と案内しており、代表的な設計手法である BEM と、著者が開発した設計手法 PRECSS を対比させる解説が本書の軸になっています。

全 9 章の構成、CSS の問題点から開発ツールまで

Chapter 1「CSS の歴史と問題点」は、CSS がすべてグローバルスコープであることや、頻繁に変更される状態の扱いといった問題を挙げ、その解決策として CSS 設計が生まれた経緯を整理します。Chapter 2「CSS 設計の基本と実践」では、詳細度とセレクター、リセット CSS、英単語を結合する方式の名前という前提を確認したうえで、よい CSS 設計が目指す 4 つのゴールと実践の 8 つのポイント、モジュールの粒度の指針を示します。4 つのゴールは、予測できる、再利用できる、保守できる、拡張できる、の 4 点です。Chapter 3「さまざまな設計手法」で取り上げる手法は OOCSS、SMACSS、BEM、PRECSS の 4 つです。続く Chapter 4 はヘッダー、フッター、コンテンツエリアのレイアウト設計、Chapter 5〜7 はモジュール集、Chapter 8 はスタイルガイド、Chapter 9 は CSS 開発に役立つその他の技術という並びです。

BEM と PRECSS を並べて読むモジュール集

Chapter 4〜7 は、レイアウトとモジュールを実際のコードで組み立てる部分です。Chapter 4 の冒頭で Chapter 4〜7 のコードの前提となるリセット CSS、独自に定義したベーススタイル、使用する設計手法を示し、Chapter 5 の冒頭では拡張パターン、バリエーション、BEM と PRECSS の差違という読み進め方を説明しています。Chapter 5 はボタン、アイコン付き小ボタン、アイコン、ラベル、見出し、注釈の最小モジュール、Chapter 6 はメディア、カード、水平と垂直と交差の 3 種類のテーブル、ページャー、タブナビゲーション、CTA、料金表、FAQ、アコーディオン、ジャンボトロン、ポストリスト、順序なしリストと順序ありリストの複合モジュールです。Chapter 7 では最小モジュールから複合モジュールを作り、最小モジュールと複合モジュール、複合モジュールどうしを組み合わせます。部品の単位で 2 つの手法の差を確かめ、組み合わせの段階で設計の良し悪しが表に出る順序を踏ませる構成だと読めます。

グローバルスコープの CSS を設計で抑える考え方

CSS 設計が必要になる理由は、CSS のセレクターが文書全体に効き、どの指定が勝つかをカスケードと詳細度の規則で決める点にあります。ある画面のために書いた指定が別の画面の要素にも当たり、それを打ち消すためにより詳細度の高いセレクターを足すと、次の修正はさらに難しくなります。BEM のようにクラス名で影響範囲を表す手法は、この問題を言語の仕組みではなく書き手の約束で抑える方法です。ビルド時にクラス名を自動でスコープ化する方式や、JavaScript の中でスタイルを書く方式のように仕組み側で抑える方法もありますが、本書の目次にそれらを扱う節は見当たらず、扱うのはクラス名と分類による設計です。Chapter 9 では Sass、Browsersync、Autoprefixer、整形の Prettier、リンター の Stylelint、Gulp や webpack といった道具を紹介しています。道具の顔ぶれは 2020 年の刊行時点のものなので、導入する際は各ツールの公式ドキュメントで版と設定の書き方を確かめながら読むのが安全です。

初級フロントエンドエンジニアとルールを決めるチームに

版元の「こんな方にオススメ」には、フロントエンドエンジニアにステップアップしたい人、CSS 設計について理解を深めたい初級フロントエンドエンジニア、会社として CSS のルールを策定したいチームリーダー等の責任者が挙がっています。Chapter 2 で詳細度やリセット CSS から確認するため、HTML と CSS で簡単なページを組んだ経験があれば読み始められます。Chapter 8 のスタイルガイドは、ジェネレーターを使う方法と手動で作る方法を扱い、作ったモジュールをチームで共有する段階の読者に役立つ部分です。スタイルガイドは デザインシステム を育てる土台にもなります。一方、React や Vue のコンポーネントの中でスタイルを完結させる方式の設計を探している場合は、目次に該当する節が無いため別の資料で補う必要があります。

既存サイトの CSS を触るたびに崩れを恐れている人や、チームで命名規則と分類のルールを決めかねている人にとって、設計の原則と、BEM と PRECSS の対比を交えた定番モジュールのコードを並べて確かめられる本書は、判断の拠り所を手元に置ける一冊です。Chapter 2 の 8 つのポイントを先に押さえ、自分のプロジェクトで使っている部品に近いモジュールから読み進めると効果を実感しやすいでしょう。