他のCSS本とはかなり異なる!現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド
Post on:2020年3月6日
私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。
本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。

本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。
B5変形判でページ数はなんと512ページ! もうちょっとした鈍器w
Kindle版も発売されています!
本書の大きな特徴の一つは、説明が非常にていねいで詳しいことです。
例えば、classの命名。

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

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

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

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

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設計完全ガイドの目次
-
- CSSの歴史と問題点
- CSSの始まり
- CSSの問題点
- 複雑化するWeb開発
- 解決策として生まれたCSS設計
- CSS設計とデザインシステムとの連携
-
- CSS設計の基本と実践
- 【CSS設計の前に】CSSの基本 詳細度とセレクター
- CSS設計の前に】リセットCSS
- 【CSS設計の前に】英単語を結合する方式の名前
- よいCSS設計が目指す4つのゴール
- CSS設計の実践と8つのポイント
- モジュールの粒度を考える
- CSS設計の必要性
-
- さまざまな設計手法
- 本Chapterの前提
- OOCSS
- SMACSS
- BEM
- PRECSS
-
- レイアウトの設計
- Chapter 4~Chapter 7のコードの前提
- 本Chapterで扱うサンプル
- ヘッダー
- フッター
- コンテンツエリア
-
- CSS設計モジュール集① 最小モジュール
- 本Chapter以降のモジュール集の進め方
- 最小モジュールの定義
- ボタン
- アイコン付き小ボタン
- アイコン
- ラベル
- 見出し
- 注釈
-
- CSS設計モジュール集② 複合モジュール
- 複合モジュールの定義
- メディア
- カード
- テーブル(水平)
- テーブル(垂直)
- テーブル(交差)
- ページャー
- タブナビゲーション
- CTA
- 料金表
- FAQ
- アコーディオン
- ジャンボトロン
- ポストリスト
- 順序なしリスト
- 順序ありリスト
-
- CSS設計モジュール集③ モジュールの再利用
- 最小モジュールを利用した複合モジュールの作成
- 最小モジュールと複合モジュールの組み合わせ
- 複合モジュール同士の組み合わせ
-
- CSS設計をより活かすためのスタイルガイド
- スタイルガイドとは
- なぜスタイルガイドが必要か?
- スタイルガイドを作成する
- スタイルガイドを作成する方針のまとめ
-
- CSS開発に役立つその他の技術
- CSS開発を効率化する,ミスを減らす
- 人による差異をなくす
- リファクタリングのヒントを得る
- CSSを軽量化する
- HTML開発を効率化する
- 開発にまつわるタスクを自動処理する
CSSに限らず、本書のように制作時の思考プロセスまでをくわしく解説している書籍はあまりないと思います。また、解説も非常に分かりやすいので、CSSの知識が最低限あれば心配はいりません。
CSSを本格的に身につけたい人にお勧めします。
献本の御礼
最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors