Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Up to date
Published
3 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

CSS Supports Nesting Now

CSS nesting is finally supported in all major browsers. Write cleaner, organized stylesheets without Sass or Less

Writing CSS used to mean lots of repetition. For years, we had to write long selectors to style nested elements. Now, native CSS nesting changes everything.

I used SCSS for years just to get nesting in my CSS. But now browsers support nesting right out of the box. No build tools needed. Let me show you how it works.

Remember writing CSS like this?

Now we can write it like this:

The nested version is more concise and shows the relationship between elements more clearly. The indentation reflects the DOM structure.

CSS nesting works with any valid selector. Here’s how you can nest different types:

The & symbol represents the parent selector. It’s particularly useful for modifiers and pseudo-classes:

You can nest media queries too, keeping related styles together:


Browser Support and Fallbacks

As of late 2023, CSS nesting is supported in all major browsers. Still, if you need to support older browsers, you have options:

  1. Use @supports to provide fallbacks
  2. Use a CSS preprocessor
  3. Use PostCSS with the nesting plugin

Here’s how you can use @supports to provide a fallback:


Best Practices

While nesting is powerful, it’s important to use it judiciously:

  1. Avoid deep nesting (more than 3 levels) as it can make styles hard to maintain
  2. Use BEM or similar naming conventions to keep specificity in check
  3. Consider the output CSS and performance implications
  4. Keep selectors as shallow as possible

If you found this article helpful, you might enjoy my free newsletter. I share developer tips and insights to help you grow your skills and career.


More Articles You Might Enjoy

If you enjoyed this article, you might find these related pieces interesting as well. If you like what I have to say, please check out the sponsors who are supporting me. Much appreciated!

Webdev
8 min read

Become a Web Developer in 180 Days

A comprehensive roadmap to becoming a proficient web developer

Oct 29, 2019
Read article
Webdev
4 min read

Open Dyslexic Font: Improve Your Web Accessibility

How to implement the Open-Dyslexic font to enhance readability for users with dyslexia

Oct 12, 2024
Read article
Webdev
4 min read

Remove Unnecessary NPM Packages with eslint-plugin-depend

We don't need packages to handle basic JavaScript tasks

Aug 13, 2024
Read article
Webdev
6 min read

Inside the CSS Engine: CSSOM Explained

A deep dive into how browsers parse and manipulate CSS, its impact on web performance, and why it matters

Oct 25, 2024
Read article
Webdev
4 min read

Understanding Vue's Suspense

How the Suspense component manages async dependencies and improves loading states in Vue apps

Aug 23, 2024
Read article
Webdev
3 min read

Preloading Responsive Images

How to properly preload responsive images to improve initial page load

Nov 28, 2024
Read article
Webdev
7 min read

Tips for Reducing Cyclomatic Complexity

Cyclomatic complexity is like counting how many ways a car can go. More options make it harder to drive because you have to make more decisions, which can lead to confusion.

Sep 10, 2024
Read article
Webdev
4 min read

LH and RLH: The CSS Units That Make Vertical Spacing Easy

Exploring new CSS line-height units that eliminate guesswork from vertical rhythm

Dec 3, 2024
Read article
Webdev
4 min read

Explicit is better than implicit

Clarity is key: being explicit makes your code more readable and maintainable.

Sep 4, 2024
Read article

Become a better engineer

Here are engineering resources I've personally vetted and use. They focus on skills you'll actually need to build and scale real projects - the kind of experience that gets you hired or promoted.

Many companies have a fixed annual stipend per engineer (e.g. $2,000) for use towards learning resources. If your company offers this stipend, you can forward them your invoices directly for reimbursement. By using my affiliate links, you support my work and get a discount at the same!


This article was originally published on https://www.trevorlasn.com/blog/css-supports-nesting-now. It was written by a human and polished using grammar tools for clarity.