The honest trade section is a fair summary: since native custom properties now cover the variables use case, the build step mostly pays off for mixins and partials. One tip for migrating gradually is to keep Sass variables for build-time values like breakpoints, but expose colors and spacing as CSS custom properties so they can change at runtime for theming. Do you cap nesting depth at two or three levels on bigger codebases?
That’s a solid approach to gradual migration. Keeping breakpoints as Sass variables while exposing colors and spacing through CSS custom properties gives you the best of both worlds, especially when runtime theming is involved.
For nesting, I’d generally aim to keep it around two or three levels deep. Beyond that, selectors can become harder to follow and tightly coupled to the HTML structure. There are exceptions, of course, but if nesting keeps growing, it’s usually a good signal to simplify the selector or split the styles into smaller components.
Do you find that a strict nesting limit works well across a team, or is a shared guideline with code reviews enough?
Ethan Moore
The honest trade section is a fair summary: since native custom properties now cover the variables use case, the build step mostly pays off for mixins and partials. One tip for migrating gradually is to keep Sass variables for build-time values like breakpoints, but expose colors and spacing as CSS custom properties so they can change at runtime for theming. Do you cap nesting depth at two or three levels on bigger codebases?