よいCSS設計
よいCSS設計が目指す4つのゴール
予測できる
スタイリングが期待通りに振る舞うかどうか
スタイリングの影響範囲が予測できるか
再利用できる
そのまま使いまわせる
保守できる
新しいモジュールを追加したときに既存のCSSを修正する必要がない状態 拡張できる
他人に理解しやすい
実現のための8つのポイント
1. 特性に応じてCSSを分類する
ベースグループ
サイト全体に適用されるスタイル
レイアウトグループ
レイアウトに関するスタイル
モジュールグループ
サイト内全体で使い回したいもの
モジュール自体にはレイアウトに関する指定はしない
2. コンテンツとスタイリングが疎結合である
HTMLの要素名（例：h2、p）をセレクターとしてなるべく使用しない
3. 影響範囲がみだりに広すぎない
まずスコープを絞る（影響範囲を狭くする）
ベーススタイルなど影響範囲の広いCSSに含めるスタイリングはなるべく最小限に留める
4. 特定のコンテキストにみだりに依存していない
モジュールは違う場所で使いまわせるように
5. 詳細度がみだりに高くない
セレクターはクラスセレクターを使用する
6. クラス名から影響範囲が想像できる
モジュールの子要素には、モジュールのルート要素のクラス名を入れるようにする
セレクター例：.bl_module .titleではなく.bl_module_titleにする
7. クラス名から見た目・機能・役割が想像できる
NG：title1、title2
OK：page-title、sub-title
命名は具体性と汎用性のバランスが大事
コンテキストではなく、見た目・機能・役割をベースに一般的なクラス名にする
他のページで使い回せるか？
見た目・機能・役割が想像できるか？
Bootstrap や Material Design などを参考
8. 拡張しやすい
なるべく変更に耐えられるように設計しておくこと
拡張しやすいクラス設計を行う（マルチクラス設計を採用する）
拡張用として作成したクラスは、機能・役割に応じて適切な粒度・影響範囲を保つ
メモ
レイアウトに関することは、レイアウト用のクラスに任せる
ヘッダーとフッターなどそれぞれ変更が入る可能性があるところは無理に共通化しなくてもいい