Week 321 was posted by Charanjit Chana on 2023-12-18.
Other than a parent selector, nesting in CSS feels like it's been missing. SCSS/SASS proved it was a powerful concept over a decade ago and I've been leaning on either (and LESS before them) forever.
CSS continues to evolve rapidly, which is a world away from where it was in the mid-2000s. We have :has(), which has a bunch of use cases and can be treated as a parent selector. We have a load of colour spaces to work with and now, nesting in CSS is here.
Ahmed Shadeed has a great write up on CSS nesting which is worth a read. I hadn't really dived into it because browsers originally planned to force a usage pattern that I didn't like but now that requirement has been dropped, I'm quite eager to get stuck in now.
I actually had little faith in it working in a meaningful way but it turns out you'll even be able to chain pseudo classes, like you can in SASS, CSS and LESS:
a {
color: red;
&:hover {
color: green;
}
}To me, this was an important inclusion in how it works. Maybe sometimes I overdo nesting, but to me it makes CSS readable and with the browser working the same way as the post-processing frameworks it looks like a great time to get stuck in!
Tags: css