Native CSS Nesting: Syntax, Gotchas, and When to Use It

Nesting is now native in CSS. It looks like Sass but behaves differently in subtle ways. Here is migrating to it. Native CSS nesting shipped in all major browsers, and it lets you write nested selectors without a preprocessor. The syntax is close enough to Sass that migrating feels trivial. until you hit the subtle differences that bite you in production. I migrated three codebases from Sass to native nesting in 2025, and I want to share so you can avoid the same mistakes. The first migration went smoothly. The second had specificity issues that took a week to untangle. The third revealed a parsing ambiguity I did not know existed. Native nesting is a great feature, but it is not Sass nesting, and treating them as interchangeable will cause problems. Basic Syntax Nesting lets you group related selectors inside a parent rule. You can use the nesting selector (ampersand) or simply start a nested rule with a symbol that cannot be mistaken for a property. .card { padding: 1rem; background: var(--surface); &.title { font-size: 1.25rem; font-weight: 600; } &.body { color: var(--text-muted); } &:hover { box-shadow: 0 4px 12px rgba(0,…