Learn how to use native CSS nesting in modern browsers. Understand the & selector, specificity rules, differences from Sass, and when to use nesting with practical examples for components, themes, and accessibility.

Here's where things get a little interesting. CSS nesting follows the same specificity rules as traditional CSS, with one important detail: the & nesting selector calculates its specificity like the :is() pseudo-class it uses the highest specificity from the parent selector list, not the sum of all the selectors.

A list of different options for compiling CSS with Eleventy

David Darnes came at me with a classic RTFM. Turns out Eleventy has a page on the docs for doing exactly this. This method uses Sass and requires a little bit of config. One thing to note is by default this will output all .scss file to the built site, so I added a check to see if the file is named app and if it's not, then skip it. Alternatively you can put your files in an _includes directory and these won't be output (thanks Dave). style: 'compressed' will minimise the CSS.

Stephanie Eckles has an Eleventy plugin for using LightningCSS which handles all the configuration and as a bonus ignores any files that start with _ so they won't get copied to the build folder.

.foo, #bar {
  .baz { /* ... */ }
}

produces the selector .foo .baz, #bar .baz in Sass but :is(.foo, #bar)) .baz in native CSS. This changes the specificity: :is() always has the specificity of its most specific selector,

Sass nesting and native CSS nesting both support syntax that looks like &foo, but it means different things.

If you don't need any templating languages and just need to get a simple site built plus Sass, use this as the contents of a fresh package.json:

npm start - copies src files to public and starts Browsersync server at localhost:3000
npm run build - copies files to public and autoprefixes/minifies css