ネイティブCSSネスティング

ネイティブCSS Nesting（2024年のBaseline、すべてのモダンブラウザで利用可能）を使うと、以前はSassやLessのプリプロセッサでしか利用できなかったネスト構文で、あるルールの内側に別のCSSルールを書けます。ネストされたルールは、親セレクターのコンテキストを自動的に継承します。

親ルールのブロック内に子セレクターを書きます。ブラウザが親セレクターと子セレクターを自動的に組み合わせます。ネストセレクターである&を使うと、モディファイアや疑似クラスで親セレクターを明示的に参照できます。

&は、ネストされたルール内で親セレクターを明示的に表します。疑似クラス（&:hover）、疑似要素（&::before）、モディファイアクラス（&.active）、属性セレクター（&[disabled]）に使用します。&を付けないネストされたルールは、子孫セレクターになります。

親の内側に疑似要素のルールを自然にネストできます：.button { &::before { content: ""; } &::after { content: ""; } }。これにより、ボタンに関するすべてのスタイルを同じ場所にまとめられ、フラットなCSSで必要だったセレクターの繰り返しを避けられます。

メディアクエリなどのat-ruleは、ルールの内側にネストできます（Chrome 112以降、Firefox 117以降）：.card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }。レスポンシブスタイルを、ファイル末尾の独立したメディアクエリブロックではなく、影響を受ける要素と同じ場所に置けます。

ネストしても詳細度のルールは変わりません。結合されたセレクターの詳細度は、フラットに記述した場合と同じです。.card .titleをネストして書いてもフラットに書いても、詳細度は同じ（0,2,0）です。Nestingは構文を便利にするものであり、詳細度を変えるものではありません。

&を使わないネストされたセレクターは、子孫セレクターを作成します：.card { .title {} }は.card .titleにコンパイルされます。&を使う場合：.card { &.active {} }は.card.activeにコンパイルされます（空白がないため、子孫ではなくモディファイアクラスです）。

ネイティブNestingはBEMにはあまり適していません。.block__elementや.block--modifierのセレクターは文字列であり、&だけではそれらを組み立てられないためです。BEMの文字列連結（引き続きプリプロセッサが必要）ではなく、疑似クラスやネストされたコンポーネント構造にNestingを使用してください。

SassのNesting構文のほとんどは、ネイティブCSSのNestingと同じです。例外として、Sassでは&-modifierによる文字列連結が可能ですが、ネイティブCSSではできません。&-や&__のパターンを確認し、それらに該当するルールだけをフラット化し、その他のNestingは維持して移行します。

ネイティブCSS Nestingは、Chrome 112以降、Firefox 117以降、Safari 16.5以降でサポートされています。古いブラウザにも対応する場合は、PostCSSとpostcss-nestingを使って、ビルド時にネイティブNesting構文をフラットなCSSへ変換できます。これにより、現在からネイティブNestingで記述し始められます。

Chrome DevToolsでは、Stylesパネルにネストされたルールがネストされた形式で表示されます。ネストされたルールをクリックすると、Sourcesパネルの正しいソース位置に移動します。モダンなDevToolsでは、ネストされたCSSのデバッグもフラットなCSSと同じように分かりやすく行えます。

&セレクターを使う場合と使わない場合で、Nestingにはどのような違いがありますか？

ネイティブCSS Nestingを使うと、通常のCSSでSassのようなネスト構文を利用できます。&セレクターは、疑似クラス、疑似要素、モディファイアの複合セレクターを作成します。ネストされた@mediaクエリによって、レスポンシブスタイルを対象の要素と同じ場所にまとめられます。PostCSSを使えば、古いブラウザ向けにネイティブNestingを変換できるため、現在から段階的に導入できます。