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:

Implementing Infinite Scroll In React Snap Carousel

Implementing infinite scroll in React with React Snap Carousel

Making carousels can be time-consuming, but it doesn’t have to be. Learn how to use React Snap Carousel to simplify the process.

David Omotayo
Dec 13, 2024 â‹… 10 min read
React Libraries For Building Forms And Surveys

React libraries for building forms and surveys

Consider using a React form library to mitigate the challenges of building and managing forms and surveys.

Hussain Arif
Dec 11, 2024 â‹… 7 min read
Hoppscotch Vs Postman: A Guide To API Testing

Hoppscotch vs. Postman: a guide to open source API testing

In this article, you’ll learn how to set up Hoppscotch and which APIs to test it with. Then we’ll discuss alternatives: OpenAPI DevTools and Postman.

Chigozie Oduah
Dec 10, 2024 â‹… 5 min read
React Native logo over red background.

Implementing camera functionality in React Native

Learn to migrate from react-native-camera to VisionCamera, manage permissions, optimize performance, and implement advanced features.

Chimezie Innocent
Dec 9, 2024 â‹… 13 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