CSSネスティングとは何ですか？

CSSでセレクタを入れ子（ネスト）にして記述できる機能。SassやLessのようなプリプロセッサなしで、ネイティブCSSだけで構造的なスタイル記述が可能になった。

CSSネスティングのポイントは？

セレクタを入れ子にして親子関係を明示的に書けるネイティブCSS機能。Sassなどのプリプロセッサに頼らず、素のCSSだけで構造的な記述が可能になった。アンパサンド（&）で親セレクタを参照でき、BEMなどの命名規則とも相性がよい

【シーエスエスネスティング】

💡 SassなしでもCSSが入れ子で書ける、待望のネイティブ機能

📌 このページのポイント

CSSネスティングのイメージ

ひよこ

CSSネスティングって、Sassでやってたやつがそのまま使えるようになったってこと？

ペンギン先生

そうだよ。今まではSassやLessなどのプリプロセッサでしかできなかった入れ子記法が、ネイティブCSSで使えるようになったんだ。ビルドツールなしで入れ子が書けるのは大きな進歩だね

ひよこ

書き方はSassと全く同じなの？

ペンギン先生

ほぼ同じだけど、少し違いがあるよ。ネイティブCSSネスティングでは「&」を使って親セレクタを参照する点は同じだけど、要素セレクタをネストするときは「& div」のように&を先頭につけるのが基本ルールなんだ

ひよこ

どのブラウザでも使えるの？

ペンギン先生

2023年後半から主要ブラウザすべてで対応済みだよ。Chrome・Firefox・Safariの最新版なら問題なく使える。もうプロダクションでも安心して使えるレベルだね

ひよこ

じゃあSassはもういらなくなるのかな？

ペンギン先生

ネスティングだけならネイティブCSSで十分だけど、Sassにはミックスインや関数、変数の演算など他の機能もあるからね。プロジェクトの規模や要件に応じて使い分けるのがベストだよ

まとめ：ざっくりこれだけ覚えればOK！

「CSSネスティング」って出てきたら「CSSを入れ子で書けるネイティブ機能」と思えればだいたいOK！

📖 おまけ：英語の意味

「CSS Nesting」＝ CSSの入れ子記法

💬 Nesting は「巣を作る」「入れ子にする」という意味。鳥が巣の中に巣を作るように、セレクタの中にセレクタを書けるということだよ