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:

debugging javascript web apps

How to master JavaScript debugging for web apps

With the right tools and strategies, JavaScript debugging can become much easier. Explore eight strategies for effective JavaScript debugging, including source maps and other techniques using Chrome DevTools.

Ivy Walobwa
Jan 9, 2025 â‹… 8 min read
A Deep Dive Into Angular’s FormArray Container

A deep dive into Angular’s FormArray container

This Angular guide demonstrates how to create a pseudo-spreadsheet application with reactive forms using the `FormArray` container.

Kayode Adeniyi
Jan 8, 2025 â‹… 3 min read
Handling React Loading States With React Loading Skeleton

Handling React loading states with React Loading Skeleton

Implement a loading state, or loading skeleton, in React with and without external dependencies like the React Loading Skeleton package.

Ibadehin Mojeed
Jan 7, 2025 â‹… 7 min read
Getting Ready For Tailwind V4.0

Getting ready for Tailwind v4.0

The beta version of Tailwind CSS v4.0 was released a few months ago. Explore the new developments and how Tailwind makes the build process faster and simpler.

Oscar Jite-Orimiono
Jan 6, 2025 â‹… 12 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