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:

When is low-code the right choice? Here’s how to decide

Not sure if low-code is right for your next project? This guide breaks down when to use it, when to avoid it, and how to make the right call.

Popoola Temitope
Jul 11, 2025 â‹… 7 min read
Comparing AI App Builders — Firebase Studio vs. Lovable vs. Replit. LogRocket Article

Comparing AI app builders — Firebase Studio vs. Lovable vs. Replit

Compare Firebase Studio, Lovable, and Replit for AI-powered app building. Find the best tool for your project needs.

Emmanuel John
Jul 11, 2025 â‹… 7 min read
Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 â‹… 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 â‹… 11 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