Nesting in CSS is here!

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

Tweet WhatsApp Keep Upvote Digg Tumblr Pin Blogger LinkedIn Skype LiveJournal Like