Native CSS nesting is now supported across all modern browsers, offering a built-in alternative to Sass nesting. The post covers how the & selector works, key differences from Sass (no string concatenation for BEM, no mixins/variables), specificity rules (& behaves like :is() using highest specificity from parent list), and practical examples including component variants, container queries, reduced-motion preferences, theming with data attributes, and :has() patterns. Guidelines on when to nest vs. avoid nesting are also provided, with a general recommendation to stay within 2-3 levels deep.
Table of contents
What is CSS Nesting?Browser SupportHow Nesting Works in the BrowserSpecificity and CSS NestingCSS Nesting vs Sass NestingA Practical Example: Building a ComponentNesting with Container QueriesAccessibility: Reduced Motion PreferencesWhen to Nest and When Not ToCSS Nesting as Part of Modern CSSSort: