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
Jochem
Jochemβ€’8mo ago
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
patwasalinguist
patwasalinguistβ€’8mo ago
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.
Jochem
Jochemβ€’8mo ago
you can, it's called SCSS
patwasalinguist
patwasalinguistβ€’8mo ago
Hmm, will check to see if SCSS can handle the new standard syntax. thanks for your suggestions
Jochem
Jochemβ€’8mo ago
it's not quite the same syntax. CSS nesting is loosely based on the nesting in SCSS/Sass though
patwasalinguist
patwasalinguistβ€’8mo ago
hmm bummer. probably better to avoid nesting for now then
Shane
Shaneβ€’8mo ago
its close enough tbh, and SCSS compiles down to raw CSS. I've used SCSS exclusivly for nesting in production for several years now
dys πŸ™
dys πŸ™β€’8mo ago
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.
patwasalinguist
patwasalinguistβ€’8mo ago
to be honest i hate preprocessing of all kinds i'd rather adjust my css until support is better thanks for the recommendations though
Kevin Powell
Kevin Powellβ€’8mo ago
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.
patwasalinguist
patwasalinguistβ€’8mo ago
Holy cow, you’re Kevin Powell! thanks πŸ™‚
dys πŸ™
dys πŸ™β€’8mo ago
The final call was to require & in nested rules, right?
patwasalinguist
patwasalinguistβ€’8mo ago
I thought it was only for cases where you’re modifying a parent selector directly, like &:hover
Kevin Powell
Kevin Powellβ€’8mo ago
What Pat said, they removed the requirement for it, unless it's directly on the parent for pseudos. Having it won't hurt though
Want results from more Discord servers?
Add your server