Nested Selectors are slowly rolling out to web browsers. It’s a feature that I have been looking forwards to for a long time. Nesting is one of the reasons to choose sass, which I often use at work for larger projects, but because this site is intentionally minimal, I wanted to keep the CSS as vanilla as possible, sass is great but it has it’s own syntax, rules and quirks.
It looks like I can finally convert all of the styling on this site to use the new syntax. As the feature isn’t 100% rolled out yet I’m still compiling my source code to regular, un-nested CSS. I chose to use Stephanie Eckles’ plugin eleventy-plugin-lightningcss, which uses Lightning CSS under the hood. Installing the plugin is simple, and Lightning CSS is very fast, it also allows me to enable nesting as a configuration option – meaning, in future, I can actually ship nested CSS by turning that option off.
As of today all of the styling for this site is now nested.
Using Lightning CSS means I can also use the standard @import to keep the styling neatly organised, without chaining loads of requests. I don’t think we’ll be seeing that feature in browsers anytime soon, unfortunately.
Further reading