2026年6月現在、CSSネスト記法が全ての主要ブラウザでサポートされ、世界の90%以上のブラウザで利用可能となりました。この変化により、多くの制作現場でSassやLessといったプリプロセッサなしでも、維持しやすいスタイルシートが書けるようになっています。

2026年現在、CSSネスト記法は全ての主要なエバーグリーンブラウザ（Chrome、Firefox、Safari）でサポートされ、2026年6月11日にはBaseline Widely Availableへの到達が予想されています。これまで制作者がSassを導入する主な理由の一つだったネスト機能が、いよいよネイティブCSS単体で実現できるようになったのです。

実際の記述は直感的で、HTMLの階層構造に合わせてCSSルールを入れ子にできます。以前は「& h2」と明示的に書く必要がありましたが、2023年後期から全ての主要ブラウザでリラックス記法がサポートされ、シンプルな子孫セレクタなら「&」を省略して書けるようになっています。.cardクラス内のh2要素なら「.card { h2 { font-weight: bold; } }」のように書けるため、コードの見通しが格段に良くなります。

この変化が制作現場に与える影響は小さくありません。ネスト機能一つで、多くのチームがプリプロセッサを使う主要な理由が解決され、スタイルシートがより読みやすく、保守しやすく、書きやすくなるためです。ツール設定が減り、ビルド時間が短縮され、後から見返すときにも理解しやすいスタイルシートになります。これまでSass導入のハードルが高かった小規模プロジェクトでも、整理されたCSS設計が取り入れやすくなるでしょう。

プリプロセッサとの使い分け

とはいえ、すべてのケースでプリプロセッサが不要になるわけではありません。ネスト機能だけが目的ならSassは不要ですが、変数の演算、ミックスイン、ループ、関数といった機能はネイティブCSSではまだ完全には代替できないのが現状です。ただし、多くの制作者にとって最も使用頻度の高い機能であるネスト記法がネイティブ化されたことで、プリプロセッサは現代CSSの基盤ではなく、オプションの拡張機能という位置づけに変わりつつあります。

ネイティブCSSネストも本格的なプロダクションコードで使える段階に到達し、すべての主要エンジンがサポートしているため、多くのプロジェクトでプリプロセッサへの依存を減らせる状況です。つくばを含む地方の制作会社にとっても、ビルド環境のセットアップが不要になることで、よりシンプルな開発フローが実現できそうです。

今後CSSは外部ツールに依存する制限的なスタイリング言語から、独自の力を持つ進化し続けるプラットフォームとしての側面を強めていくと予想されます。ネイティブCSSネストの普及は、その転換点の一つと言えるでしょう。