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:

Use TypeScript Instead Of Python For ETL Pipelines

Use TypeScript instead of Python for ETL pipelines

Build a TypeScript ETL pipeline that extracts, transforms, and loads data using Prisma, node-cron, and modern async/await practices.

Muhammed Ali
Apr 17, 2025 â‹… 6 min read
best react charts libraries

Best React chart libraries (2025 update): Features, performance & use cases

Looking for the best React charting library? Compare the latest options, from Recharts to MUI X Charts, and see which one fits your project best.

Hafsah Emekoma
Apr 16, 2025 â‹… 10 min read
TypeScript Is Going Go: Why It's The Pragmatic Choice

TypeScript is going Go: Why it’s the pragmatic choice

Explore why the TypeScript team is porting the compiler to Go in TypeScript 7. Learn how this shift impacts performance, tooling, and the future of the TypeScript ecosystem.

John Reilly
Apr 16, 2025 â‹… 9 min read
six RAG types you should know

6 retrieval augmented generation (RAG) techniques you should know

Explore six powerful RAG techniques to enhance LLMs with external data for smarter, real-time AI-driven web applications.

Rosario De Chiara
Apr 16, 2025 â‹… 6 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