CSS Nesting is now available with Vanilla CSS

CSS (Cascading Style Sheets) is a fundamental component of web development. It is responsible for styling web pages, making them look visually appealing and professional. In September 2019, the W3C (World Wide Web Consortium) introduced a new CSS nesting feature that simplifies the way we apply styles to our web pages. In this blog post, we will explore this new feature and how it can enhance the Vanilla CSS experience.

Selim Enes

Published in

CodeX

3 min readMar 12, 2023

Simplified CSS Structure

One of the primary benefits of the new CSS nesting feature is that it simplifies the CSS structure. With this feature, we can now nest styles within each other, reducing the clutter that comes with the traditional CSS approach. For example, instead of writing:

.navbar {
  background-color: #333;
}

.navbar ul {
  list-style: none;
}

.navbar ul li {
  display: inline-block;
}

.navbar ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

We can now write:

.navbar {
  background-color: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: #fff;
        text-decoration: none;
        padding: 10px;
      }
    }
  }
}

As you can see, the nesting feature allows us to group related styles together, making the code cleaner and more organized.

Improved Readability

The new CSS nesting feature also improves code readability. Nesting allows developers to easily understand the relationship between different styles. It is easier to see which styles apply to which element, making it easier to maintain and update the code. It also reduces the likelihood of errors in the code because styles are grouped together in a logical manner.

Compatibility with Vanilla CSS

The new CSS nesting feature is compatible with Vanilla CSS, which means that we don’t need to use preprocessors such as Sass or Less to take advantage of this feature. We can now write nested CSS in Vanilla CSS, making it easier and more accessible for developers who are just starting with web development.

Is CSS Nesting Ready to Use?

However, CSS Nesting is a great improvment for Vanilla CSS, it’s not compatible yet with all browsers. So, don’t forget to check Can I Use website before using it on your next project!

Conclusion

The new CSS nesting feature simplifies the CSS structure, improves code readability, and is compatible with Vanilla CSS. It is a welcome addition to the web development community, and we can expect to see it being used more often in the future. As developers, it is important to stay up to date with new features and technologies, and the new CSS nesting feature is an excellent example of how we can improve our development workflow.

NOTE: Notion AI wrote this article except for the ‘Is CSS Nesting Ready to Use?’ section. Please share your comments on the outcome.