他のCSS本とはかなり異なる！現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド

私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。

本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。

本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。

B5変形判でページ数はなんと512ページ！ もうちょっとした鈍器ｗ
Kindle版も発売されています！

• CSS設計完全ガイド Kindle版

本書の大きな特徴の一つは、説明が非常にていねいで詳しいことです。
例えば、classの命名。

予測できる、再利用できる、保守できる、拡張できる、といった解説だけでなく、アバウトページのサービス紹介で画像とテキストのモジュールだと、aboutやserviceという文字が必要なのか、imageとtextだとそれらに用途が限定されないか、mediaだと汎用性があるのか、といった思考のプロセスがすべて文字で解説されています。
もちろん、CSSのコード解説も非常に充実しています。

そんな紙面をキャプチャで少しだけ紹介します。

本書は9章構成で、CSSの設計について基礎から実践的なテクニックまで詳しく解説されています。1章でCSSの現状をしっかり認識しておきましょう。

CSS自体は簡単ですが、扱うページ数や要素が増えるにつれ、複雑になり、管理しきれなくなり、難しくなります。その解決策が、CSS設計です。
複数のメンバーで制作するコード、将来の自分が修正するコードの最適解です。

2章では、CSS設計に必要な基礎知識と実践を学びます。特に詳細度の管理は、CSS設計で欠かせない重要なポイントなので、あやふやな人は復習も兼ねてしっかり身につけておきましょう。

CSSを記述する際、最初に行うべきことはベーススタイルの整理です。ブラウザに備わっているデフォルトのスタイルを理解した上で、リセットやノーマライズを採用するのが一般的な方法です。
当ブログでも特集記事があるので、参考にしてみてください。

• 各ブラウザごとのデフォルトのスタイルシートのまとめ
• 2020年、モダンブラウザに適したCSSリセットのまとめ

「よいCSSとは何か」目指すものが漠然としていると迷いが生じてしまうので、はっきりさせておきましょう。

• 予測できる
• 再利用できる
• 保守できる
• 拡張できる

3章では、CSSのさまざまな設計手法が解説されています。OOCSS、SMACSS、BEMなど、モジュールベースの設計です。

それぞれの概要や利点や具体的なコードが掲載されています。使用したことがない人でも、どのような感じか一目で分かると思います。

また、4つ目として著者が開発した「PRECSS」も。本書ではこれらの4つの設計手法を使用して、実装テクニックが解説されています。
参考: CSSの新しい設計思想 PRECSSを作りました

4章からは実践的なコードです。まずは、レイアウト設計として、使用するCSSリセット・ベーススタイルに、前述の設計手法を使用して実装します。レイアウトは、ヘッダ・フッタ・コンテンツ（1カラム・2カラム）です。

5章は、ボタン・アイコン・ラベル・見出しといった最小モジュールの実装。

モジュールなので、当然拡張します。例えば、ボタンは矢印付きボタン・大ボタン・色違いボタンといった具合です。拡張できることを前提としたボタンの実装です。

6章は、いくつかの要素からなる複合モジュール。例えば、画像と小見出しとテキストから構成されたカード・ナビゲーション・テーブル・リスト・料金表・ページャー・FAQなどです。これらももちろん、基本的があり、拡張パターンやバリエーションがあります。

7章はモジュールの再利用で、ここまでに作成したモジュールを組み合わせて新たなモジュールを作成します。
CSSがさらに面白くなるのは、ここからです。
ボタンを組み合わせた水平ボタンリスト、ボタン内の文字数は、スペースはどうやる、2個の場合3個いやそれ以上、考えることも実装も複雑さが増していきます。

8章はCSS設計をより活かすためのスタイルガイド。実装したモジュールを効率よく管理・運用するためには欠かせません。本書ではスタイルガイドを生成するツールを使用した作成方法が解説されています。

最後の9章では、CSS設計に限らず、CSSを記述する時に役立つツールや技術が解説されています。

CSS設計完全ガイドの目次

1. CSSの歴史と問題点

   CSSの始まり

   CSSの問題点

   複雑化するWeb開発

   解決策として生まれたCSS設計

   CSS設計とデザインシステムとの連携

2. CSS設計の基本と実践

   【CSS設計の前に】CSSの基本 詳細度とセレクター

   CSS設計の前に】リセットCSS

   【CSS設計の前に】英単語を結合する方式の名前

   よいCSS設計が目指す4つのゴール

   CSS設計の実践と8つのポイント

   モジュールの粒度を考える

   CSS設計の必要性

3. さまざまな設計手法

   本Chapterの前提

   OOCSS

   SMACSS

   BEM

   PRECSS

4. レイアウトの設計

   Chapter 4～Chapter 7のコードの前提

   本Chapterで扱うサンプル

   ヘッダー

   フッター

   コンテンツエリア

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

   本Chapter以降のモジュール集の進め方

   最小モジュールの定義

   ボタン

   アイコン付き小ボタン

   アイコン

   ラベル

   見出し

   注釈

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

   複合モジュールの定義

   メディア

   カード

   テーブル（水平）

   テーブル（垂直）

   テーブル（交差）

   ページャー

   タブナビゲーション

   CTA

   料金表

   FAQ

   アコーディオン

   ジャンボトロン

   ポストリスト

   順序なしリスト

   順序ありリスト

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

   最小モジュールを利用した複合モジュールの作成

   最小モジュールと複合モジュールの組み合わせ

   複合モジュール同士の組み合わせ

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

   スタイルガイドとは

   なぜスタイルガイドが必要か？

   スタイルガイドを作成する

   スタイルガイドを作成する方針のまとめ

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

   CSS開発を効率化する，ミスを減らす

   人による差異をなくす

   リファクタリングのヒントを得る

   CSSを軽量化する

   HTML開発を効率化する

   開発にまつわるタスクを自動処理する

CSSに限らず、本書のように制作時の思考プロセスまでをくわしく解説している書籍はあまりないと思います。また、解説も非常に分かりやすいので、CSSの知識が最低限あれば心配はいりません。
CSSを本格的に身につけたい人にお勧めします。

献本の御礼

最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス