【レビュー】CSS設計完全ガイド　～詳細解説＋実践的モジュール集

------------------------------------------------
Chapter 1　CSSの歴史と問題点
------------------------------------------------
1-1　CSSの始まり
CSSの役割と目的
1-2　CSSの問題点
「カオス」になるCSS
CSSはすべてがグローバルスコープ
1-3　複雑化するWeb開発
変更不可能なHTML/CSSと付き合う
増加するページ数
頻繁に変更される「状態」
1-4　解決策として生まれたCSS設計
1-5　CSS設計とデザインシステムとの連携

------------------------------------------------
Chapter 2　CSS設計の基本と実践
------------------------------------------------
2-1　【CSS設計の前に】CSSの基本 詳細度とセレクター
セレクターの種類と、本書における呼称
カスケーディングの基礎
詳細度の基礎
2-2　【CSS設計の前に】リセットCSS
ブラウザのデフォルトスタイル
ハードリセット系CSS
ノーマライズ系CSS
リセットCSSはCSS設計にどのような影響を及ぼすか？
2-3　【CSS設計の前に】英単語を結合する方式の名前
2-4　よいCSS設計が目指す4つのゴール
予測できる
再利用できる
保守できる
拡張できる
2-5　CSS設計の実践と8つのポイント
1. 特性に応じてCSSを分類する
2. HTMLとスタイリングが疎結合である
3. 影響範囲がみだりに広すぎない
4. 特定のコンテキストにみだりに依存していない
5. 詳細度がみだりに高くない
6. クラス名から影響範囲が想像できる
7. クラス名から見た目・機能・役割が想像できる
8. 拡張しやすい
2-6　モジュールの粒度を考える
改めてモジュールとは
モジュールの粒度のばらつきが引き起こす問題
モジュール粒度の指針
2-7　CSS設計の必要性

------------------------------------------------
Chapter 3　さまざまな設計手法
------------------------------------------------
3-1　本Chapterの前提
3-2　OOCSS
ストラクチャーとスキンの分離
コンテナとコンテンツの分離
OOCSSのまとめ
3-3　SMACSS
ベースルール
レイアウトルール
モジュールルール
ステートルール
テーマルール
SMACSSのまとめ
3-4　BEM
BEMの基本
Blockの基本
Elementの基本
Modifierの基本
Blockのネスト
Mix
Mixでは対処できない場合
Modifier名は省略してはいけない
BEMのその他の命名規則
BEMのまとめ
3-5　PRECSS
基本的な指針
ベースグループ
レイアウトグループ
モジュールグループ
ヘルパーグループ
ユニークグループ
プログラムグループ
オリジナルグループ
PRECSSのまとめ

------------------------------------------------
Chapter 4　レイアウトの設計
------------------------------------------------
4-1　Chapter 4～Chapter 7のコードの前提
使用するリセットCSS
独自に定義したベーススタイル
使用する設計手法
4-2　本Chapterで扱うサンプル
4-3　ヘッダー
①.header__inner / .ly_header_innerに対するスタイリング
4-4　フッター
①ボーダーの実装方法の違い
ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか？
4-5　コンテンツエリア
1カラム設計
2カラム設計

------------------------------------------------
Chapter 5　CSS設計モジュール集①　最小モジュール
------------------------------------------------
5-1　本Chapter以降のモジュール集の進め方
拡張パターンについて
バリエーションについて
BEMとPRECSSの差違について
5-2　最小モジュールの定義
5-3　ボタン
基本形
拡張パターン
バリエーション
5-4　アイコン付き小ボタン
基本形
拡張パターン
5-5　アイコン
基本形
拡張パターン
バリエーション
5-6　ラベル
基本形
拡張パターン
バリエーション
5-7　見出し
基本形
バリエーション
5-8　注釈
基本形
バリエーション

------------------------------------------------
Chapter 6　CSS設計モジュール集②　複合モジュール
------------------------------------------------
6-1　複合モジュールの定義
6-2　メディア
基本形
拡張パターン
バリエーション
6-3　カード
基本形
拡張パターン
6-4　テーブル（水平）
基本形
拡張パターン
6-5　テーブル（垂直）
基本形
6-6　テーブル（交差）
基本形
6-7　ページャー
基本形
6-8　タブナビゲーション
基本形
6-9　CTA
基本形
6-10　料金表
基本形
バリエーション
6-11　FAQ
基本形
6-12　アコーディオン
基本形
6-13　ジャンボトロン
基本形
6-14　ポストリスト
基本形
6-15　順序なしリスト
基本形
拡張パターン
バリエーション
6-16　順序ありリスト
基本形
バリエーション

------------------------------------------------
Chapter 7　CSS設計モジュール集③　モジュールの再利用
------------------------------------------------
7-1　最小モジュールを利用した複合モジュールの作成
水平ボタンリスト
7-2　最小モジュールと複合モジュールの組み合わせ
ボタン + 画像半分サイズメディア
ボタン + CTAエリア
ラベル + ポストリスト
7-3　複合モジュール同士の組み合わせ
FAQ + リスト
アコーディオン + カード + CTAエリア

------------------------------------------------
Chapter 8　CSS設計をより活かすためのスタイルガイド
------------------------------------------------
8-1　スタイルガイドとは
8-2　なぜスタイルガイドが必要か？
8-3　スタイルガイドを作成する
スタイルガイドジェネレーターを使用する
手動で作成する
8-4　スタイルガイドを作成する方針のまとめ

------------------------------------------------
Chapter 9　CSS開発に役立つその他の技術
------------------------------------------------
9-1　CSS開発を効率化する、ミスを減らす
Sass
Browsersync
Autoprefixer
9-2　人による差異をなくす
CSScomb
EditorConfig
Prettier
9-3　リファクタリングのヒントを得る
Stylelint
CSS Stats
9-4　CSSを軽量化する
CSS MQPacker
cssnano
9-5　HTML開発を効率化する
Nunjucks
EJS
Pug
9-6　開発にまつわるタスクを自動処理する
Prepros
Gulp
webpack

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

　・【技術書】自分用_読んだ技術書を簡単にまとめていくための記事[2022-07-23に投稿]

　・実務経験1年目にやったおすすめ教材[2022-04-04に投稿]

　・【2021年版】サーバーサイドエンジニアがVue.jsでモダンフロントエンド開発を始めるまで[2021-02-15に投稿]

　・理想と現実のCSS設計[2020-12-24に投稿]

　・【HTML・CSS】子要素内のコンテンツ配置をdisplay:flexで行う[2020-11-28に投稿]

　・Electronでタスク管理アプリ作ってみた[2020-11-14に投稿]

　・はじめてのCSS設計の記録【検討編】[2020-10-11に投稿]

　・1年前に素人がFLOCSS使って直面した疑問/失敗に対し、PRECSSを学んで解消 / 前進できた話[2020-08-27に投稿]