CSS Nite 『CSS設計完全ガイド』の著者による「CSS設計のキホンと王道パターン」
そもそもCSS設計とは何か？
CSS最大の欠点：グローバルスコープしかない
→ スタイルが衝突する問題は努力と工夫でクリアするしかない
→ 努力と工夫＝CSS設計
なぜCSS設計が必要か？
・バグを抑える
・サイトの寿命を伸ばす
・サイトの改善スピードを速める
主なCSS設計
・OOCSS
→ ストラクチャーとスキンの分解
→ コンテナとコンテンツの分離
・SMACSS
→ CSSを5種に分類
・BEM
→ Blockを基本単位とし、その子要素となるElement、
変更を加えるModifierと分類
→ ルールが厳しく複数人開発でブレが出づらい
・FLOCSS
→ 日本での利用度は高めな印象
→ 3つの大レイヤーとObject内の小レイヤーで分類
・PRECSS
→ CSSを6つに分類＋開発者が独自にグループを作成できる
結局どれがいいのか？
→ サイト規模、デザインの特性、チームの大きさなどで決める
CSS設計の8つのポイント
悪いCSSの本質的な問題を回避すること
・特性に応じてCSSを分類する
→ ベース/レイアウト/モジュールなど
・HTMLとスタイリングが疎結合である
→ HTMLの変化が見た目に影響しないようにする
・影響範囲が広すぎない
→ 影響範囲が適切か
・特定のコンテキストに依存しすぎない
→ 特定の場所以外にも転用できるか
・詳細度が高すぎない
→ 詳細度が適切か
・クラス名から影響度が想像できる
→ 意図せぬ場所に影響しないかCSSの詳細を確認しに行かなくて良い
・クラス名から見た目・機能・役割が想像できる
→ クラス名をみただけでどこに使われるべきクラスかがわかる
・拡張しやすい
→ シングルクラス設計 or マルチクラス設計
モジュール設計のポイント
モジュールの単位をどのように区切るか
・差異が要素の増減のみの場合は同一モジュールにする
・「よく埋め込まれるもの」は独立したモジュールにする
・レイアウト形成が必要な場合は専用のラッパーモジュールを作る
どこまでをモディファイアで処理し、どこから新規モジュールにするか
・ベースモディファイアをつくって処理する
→ クラスがたくさん必要
→ ベースモディファイアだけでは機能しないという状態はイマイチ
・モディファイアをたくさんつけて使用するようになったら新規モジュールにする
継承を上手く使いこなす
・王道パターンを知る
・CSS変数/currentColorを使う
モジュールに変更を加える際の設計のポイント
・モジュール自身のことはモディファイアで
・モジュールのレイアウトはコンテキストで
・「1つの役割」に対し、1つのモディファイア
・「1つの役割」が「1つのプロパティのみ」とは限らない（子要素の上書きもOK）
・「役割」と「名前」を一致させることが重要
マージンのこと
マージンは要素が複数になって初めて発生する
→ 縦はTOP／横はLEFTが自然かも
→ とはいえ状況に応じて
余白設計のポイント
ヘッダー／コンテンツエリア／フッターのどこに余白を持たせるか？
・ヘッダー／フッターにもたせると汎用性がイマイチ
→ ヘッダー／フッターにぴったりつけたいデザインが破綻する
・コンテンツエリアの上下余白をモジュールにもたせる
→ 背景色の入るレイアウトが破綻する
・上下余白用のセクションクラスを追加する
モジュール間の余白をどこにもたせるか？
・各モジュールに直接marginをつける
→ デザインで定義されていれば有効
→ 意図せずモジュールがくっついてしまうことがない
→ 再利用の際の邪魔になる
・コンテキストから画一的に設定する
→ デザインで定義されていれば有効
→ 意図せずモジュールがくっついてしまうことがない
・組み合わせを愚直に実装する
→ デザインの余白を自動的に再現できる
→ 全パターンを網羅しにくい／デザインでも網羅されている必要がある
・毎回ユーティリティクラスをつける
→ ページごとに柔軟な余白を調整できる
→ 変更があった場合に全HTMLに修正が必要
→ ブロックエディタが有効なCMSの場合は余白調整の専用フィールドを用意することで利用しやすくなる
・上3つのどれかとユーティリティクラスを組み合わせる
→ デフォルト値＋例外
CSS設計とは？
＝徹底的な役割分担
CSS設計で身につく技術とは？
→ UIの整理眼
→ 責任分離の抽象思考
参考
https://codepen.io/collection/PYqqqq