All About CSS Nesting 🔥

One of our favorite CSS preprocessor features is now built into the language: nesting style rules.

CSS nesting is a feature that allows you to write CSS rules inside other rules, making your code more organized and readable. It is fairly new and not yet supported by all browsers. You can check the browser compatibility for CSS nesting here.

Getting Started

Following is the preview of HTML elements we will be targeting with CSS.

<div class="container">
    <h1>I am inside container</h1>
    <div class="child_container">
        <h1>I am inside <span>child</span> container</h1>
    </div>
</div>

Without CSS nesting

.container {
    color: red;
}

.container > .child_container {
    color: blue;
}

.container > .child_container span {
    color: orange;
}

With CSS nesting

.container {
    color: red;

    > .child_container {
        color: blue;

        & span {
            color: orange;
        }
    }
}

output

Try this in your browser

In above example we are targeting .child_container class within .container class using direct child selector >. This boils down to .container > .child_container.

We can clearly see that there is less code repetition when we are using CSS nesting and moreover it makes our code more readable. When we are not using CSS nesting we need to repeat the complex CSS Selectors again and again to target specific elements and apply different styles to them. CSS nesting solves this issue by using & symbol which is a reference to parent selector.

Understanding `&`

The & symbol in CSS nesting is a way to reference the parent selector when writing nested rules. It can be used to append or prepend selectors to the parent selector, creating more specific or complex selectors.

.container {
    & .child_container {
        /* .container .child_container */

        & .btn {
          /* .container .child_container .btn */
        }
    }
}

.container {
    .content & {
        /* .content .container */

        .main & {
            /* .main .content .container*/
        }
    }
}

Nesting @media

It can be very distracting to move to a different area of the stylesheet to find media query conditions that modify a selector and its styles. That distraction is gone with the ability to nest the conditions right inside the context. This bundles all the styles to an element in same place making code more understandable.

.container {
    @media (width > 300px) {
        color: blue;
    }
}

In above example the media query will only affect .container class.

Conclusion

CSS nesting can also help you with media queries, pseudo-classes, and grouping related styles together. However, you should be careful not to overuse it or create too much specificity, as that can make your code harder to maintain and override

CSS Nesting is only at version 1. Version 2 will introduce more syntactic sugar and potentially fewer rules to memorize.

Nesting is a big enhancement to the CSS language. It has authoring implications to almost every architectural aspect of CSS. This big impact needs to be deeply explored and understood before version 2 can effectively be specified.

You can visit following sites to know more about CSS nesting

Happy Coding 👨‍💻