CSSネスティングの使い方 — Sassなしでセレクタを入れ子に書く
& で親セレクタを参照する書き方
SassやLessなどのCSSプリプロセッサで最も人気のある機能だったネストルールが、ネイティブCSSでもサポートされるようになりました。&セレクタを使用して親コンテキストを参照し、関連するスタイルを論理的にグループ化できます。
ビルド過程なしでCSSファイルの構造をより読みやすく保守しやすくし、すべての主要ブラウザでサポートされています。
適用方法
1
既存CSSで関連セレクタを親ルール内にネストする
2
&セレクタで親を明示的に参照する
3
メディアクエリや@supportsもネストして記述できる
4
Sassプリプロセス依存を段階的に除去する
メリット
- ✓ ビルドツールなしで構造化されたCSSを記述できる
- ✓ プリプロセッサ依存を除去しビルド時間を短縮できる
デメリット
- ✗ 過度なネストはセレクタ特異性を高めCSS衝突を引き起こしうる
- ✗ Sassの変数、ミックスインなど高度な機能は代替できない
ユースケース
BEM方法論ベースのコンポーネントスタイルをきれいに構造化
Sassからネイティブ CSSへの段階的マイグレーション