Is CSS nesting ready for production?
caniuse.com says it is supported across all major browsers, is that enough to start using it in production?
https://caniuse.com/css-nesting
14 Replies
85% is on the low side to have important features depend on it. It's best to compare your own analytics with the browsers that are listed as supporting it, and test in those
Hmm thanks. It's kind of frustrating because nesting has been such a game change for me for writing CSS, I hate to give it up. Maybe I can find a way to generate un-nested from nested CSS.
you can, it's called SCSS
Hmm, will check to see if SCSS can handle the new standard syntax.
thanks for your suggestions
it's not quite the same syntax. CSS nesting is loosely based on the nesting in SCSS/Sass though
hmm bummer. probably better to avoid nesting for now then
its close enough tbh, and SCSS compiles down to raw CSS. I've used SCSS exclusivly for nesting in production for several years now
Rather than SCSS, I prefer PostCSS (which can parse SCSS, but I stick to standards-compliant CSS), specifically with the postcss-preset-env plugin which handles a slew of upcoming features with partial browser support.
Next.js (using Turbopack) and Vite both have built-in support for PostCSS and just require creating a config to override the default behaviors.
to be honest i hate preprocessing of all kinds
i'd rather adjust my css until support is better
thanks for the recommendations though
I use
postcss-preset-env too, and it's great, but be careful with some of the more cutting edge stuff. I've seen people just assume that it'll work, but even nesting, at first, worked differently once they spec-ed it out than how it handled it. Even the current implementation is probably slightly different from the actual spec because of how the & is handled.
That said, if you want to use nesting, I'd either use PostCSS or SCSS. It's close enough outside of the edge cases that you'd find it to basically be the same thing. It's going to be, at minimum, another year before it's safe for production.Holy cow, you’re Kevin Powell! thanks 🙂
The final call was to require
& in nested rules, right?I thought it was only for cases where you’re modifying a parent selector directly, like &:hover
What Pat said, they removed the requirement for it, unless it's directly on the parent for pseudos. Having it won't hurt though