Let me draw your attention to one of the most important CSS updates we’ve been waiting for decades.

Many prominent developers have stated that they will stop using CSS preprocessors if CSS adds native support for variables and nesting. CSS variables have long been supported by all browsers, and now it’s time for CSS nesting to become part of the CSS family of native features.

After all these long years of waiting, we finally got what we deserved.

Take a closer look at the image in this article above and realize that what you are seeing is not some CSS preprocessor syntax or some PostCSS plugin. This is completely native CSS.

Browser Support of CSS Nesting Module

As you can see, all modern browsers now support (caniuse) the CSS Nesting Module, so feel free to give it a try.

Simple Nesting

// Before

.parent {
 color: red;
}

.parent .child {
 color: blue;
}

// After

.parent {
 color: red;

 .child {
 color: blue;
 }
}

As you can see it’s dead simple and very similar/identical to the syntax of the well-known CSS preprocessors. All .child elements inside of .parent will be colored blue.

Nested Tag Selectors

// Before

.parent {
 color: red;
}

.parent p {
 color: blue;
}

// After

.parent {
 color: red;

 & p {
 color: blue;
 }
}

Here we use & symbol before p to not violate the “cannot start with a letter” rule that was introduced alongside nested selectors which says.

The nested selector cannot start with a letter.

While it’s important for tag selectors to start with &, you can optionally use & for other selectors as well, consider it as this pointer.

Okay, let’s move on.

Multiple Nestings

// Before

.parent {
 color: red;
}

.parent span, .parent .quote {
 color: blue;
}

// After

.parent {
 color: red;
 
 & span, .quote {
 color: blue;
 }
}

Pseudo-Classes Like :hover, :is, etc.

// Before

.parent {
 color: red;
}

.parent p {
 color: blue;
}

.parent p:hover {
 color: lavender;
}

// After

.parent {
 color: red;
 
 & p {
 color: blue;
 
 &:hover {
 color: lavender;
 }
 }
}

Compound Selectors

// Before

.btn {
 color: red;
}

.btn.lg {
 font-size: 32px;
}

// After

.btn {
 color: red;
 
 &.lg {
 font-size: 32px;
 }
}

Nesting Media Queries

It really drives me crazy. Writing media queries separately from their selectors was a huge issue. It’s very common for media queries to get lost and introduce dead styles into your stylesheets, as well as making your element hard to understand at a glance.

// Before

.card {
 font-size: 1rem;
}

@media (width >= 1024px) {
 .card {
 font-size: 2rem;
 }
}

@media (width >= 764px) {
 .card.lg {
 font-size: 1.25rem;
 }
}

// After

.card {
 font-size: 1rem;

 @media (width >= 1024px) {
 font-size: 2rem;
 }

 @media (width >= 764px) {
 &.lg {
 font-size: 1.25rem;
 }
 }
}

Conclusion

It’s been a very long journey and I’m really confident that CSS won’t stop there and will continue to implement other most requested features such as CSS cycles and arrays so we can create a superior experience for our users. But the next big release candidate is CSS Nesting Module Version 2 which is already in draft and will amaze us with more exciting features.

Happy coding and patience!

Hope this will be helpful for you and your team and will let you focus on important things!