For years, frontend developers have relied on CSS pre-processors like LESS and SASS to bring structure and logic to their stylesheets. One of the most beloved features of these pre-processors is nesting, which allows for a more organized and readable way to style elements based on their parent-child relationships. Now, with the introduction of native CSS nesting, developers can achieve similar structured styling without the need for a pre-processor. Let's dive into this exciting feature.

What is CSS Nesting?

CSS nesting provides the ability to nest one style rule inside another. The selector of the child rule is relative to the selector of the parent rule. This behavior, previously exclusive to CSS pre-processors, is now natively supported in modern browsers.

For those familiar with LESS, the concept is not new:

.parent {
  color: red;
  .child {
    color: blue;
  }
}

With native CSS nesting, the same can be achieved as:

.parent {
  color: red;
  .child {
    color: blue;
  }
}

Why Use Native CSS Nesting?

1. No Pre-processors Required: While pre-processors offer a range of features, they also add an additional layer of complexity to the build process. With native support, you can achieve structured styling without any external dependencies.

2. Performance: Native features are typically optimized for performance. By relying on browser-implemented features, you can often achieve faster render times.

3. Future-Proofing: As CSS evolves, native features will be maintained and updated by browser vendors, ensuring longevity and compatibility.

Browser Support

As of now, CSS nesting is supported in:

• Chrome (from version 112)
• Safari (Technical Preview 162 and later)
• Other browsers are rapidly catching up, with many in the pipeline for support.

Check the latest browser support here.

How to Use CSS Nesting

The syntax is straightforward and will be familiar to those who've used LESS:

.nesting {
  color: hotpink;
  > .is {
    color: rebeccapurple;
    > .awesome {
      color: deeppink;
    }
  }
}

You can also use the & symbol to refer to the parent selector:

.button {
  background-color: gray;
  &:hover {
    background-color: black;
  }
}

Caveats and Considerations

1. Starting with an Identifier: Unlike LESS, native CSS nesting does not allow starting the nested selector with an identifier. For instance, the following is invalid:

div {
  color: red;
  input {
    margin: 1em;
  }
}

However, this can be rephrased using the & symbol:

div {
  color: red;
  & input {
    margin: 1em;
  }
}

1. Over-nesting: Just because you can nest, doesn't mean you always should. Over-nesting can lead to specificity issues and make your CSS harder to maintain. As a rule of thumb, try not to nest more than three levels deep.

Conclusion

CSS nesting is a significant step forward in making CSS more structured and maintainable. While it doesn't replace all the features of pre-processors like LESS, it does offer a native solution for one of the most commonly used features. As with any new feature, it's essential to test thoroughly and ensure compatibility across browsers. Happy styling!

Feel free to reach via following platforms:

• Twitter
• Github
• LinkedIn

Cover by Robert Katzki on Unsplash