2023-12-27
2027
#css
Sarah Chima Atuonwu
69819
Dec 27, 2023 â‹… 7 min read

Native CSS nesting: What you need to know

Sarah Chima Atuonwu I am a Fullstack software developer that is passionate about building products that make lives better. I also love sharing what I know with others in simple and easy-to-understand articles.

Recent posts:

The right way to implement AI into your frontend development workflow

Discover how to integrate frontend AI tools for faster, more efficient development without sacrificing quality.

Wisdom Ekpotu
Apr 23, 2025 â‹… 5 min read
deploying react apps to github pages

How to deploy React apps to GitHub Pages

Walk through the process of deploying a Create React App project to GitHub Pages, customizing your domain, and automating deployments with GitHub Actions.

Nelson Michael
Apr 22, 2025 â‹… 10 min read
move before api

We can finally move elements in the browser with the moveBefore() API

The newly announced moveBefore() API helps developers easily reposition DOM elements while preserving their state.

Chizaram Ken
Apr 22, 2025 â‹… 8 min read
float ui tutorial

Building responsive websites fast: A Float UI tutorial

Discover Float UI, a set of pre-made templates that leverage the power of Tailwind CSS to help developers create professional websites quickly.

Murat YĂĽksel
Apr 21, 2025 â‹… 22 min read
View all posts

6 Replies to "Native CSS nesting: What you need to know"

  1. Maybe not best to use it unless totally necessary, as SCSS still has advantages of not requiring to use that many ampersands in the code. And it can easily be forgotten or that it can catch errors before the compiling has completed. And also that we have modules that we can work from which would make it ideal. But either way would be good to have that as native.

    Kind regards,
    Michael

  2. BBEdit can reformat these before and after examples to be much easier to understand. For instance, here’s the over-nested example:

    main
    {
    & section { background-color: red;
    & ul { background-color: green;
    & .list { font-size: 16px;
    & .link { color: pink;
    &: hover { color: blue;
    }

    main section { background-color: red; }
    main section ul { background-color: green; }
    main section ul .list { font-size: 16px; }
    main section ul .list .link { color: pink; }
    main section ul .list .link:hover { color: blue; }

  3. After writing Less, Sass, SCSS, Stylus, back to SCSS… and now spending a year with no pre-processor: it’s hard to imagine using this syntax. As huge fans of nesting… we can’t believe we’re come to a point where we might just prefer not to. If we could skip the & on every line, and we also had HTTP2 or something concatenate the files natively, maybe it would be a winner. We’ll cross our fingers for something better to happen… or wait to evolve our stance.

  4. Hi Sarah, thanks a lot. About “Styles after nested selectors are ignored”, it works on my side so does it depends of the browser?

Leave a Reply