🧩 CSS Nesting: Writing cleaner, more readable style sheets

🔍 What is CSS Nesting?

Traditionally, in CSS, each selector is written separately.
For example, if we want to style a navigation list with its links, we write something like:

nav {
   background-color: #222;
}

nav ul {
   list-style: none;
}

nav li {
   display: inline-block;
}

nav a {
   color: white;
   text-decoration: none;
}

This approach works, but it quickly becomes verbose and difficult to maintain, especially in large projects.
With CSS nesting, we can nest rules much more naturally:

nav {
   background-color: #222;
   
   ul {
      list-style: none;
   }
   
   li {
      display: inline-block;
   }
   
   a {
      color: white;
      text-decoration: none;
   }
}

Much cleaner, right? 😎

🧠 How Nesting Works in CSS

CSS nesting was officially introduced as part of the CSS Nesting Module Level 1 and is now supported by most modern browsers (Chrome, Edge, Safari, and Firefox from version 117 onwards).

The logic is simple:
– Nested rules must be contained within a parent selector.
– If you need to refer to the selector itself (the "parent"), use the & symbol.

Practical example:

button {
   color: white;
   background-color: #007bff; 
   
   &:hover { 
      background-color: #0056b3; 
   } 
   
   &.active { 
      background-color: #003f7f; 
   }
}

Here, the symbol & represents the button selector.
So &:hover becomes button:hover, and &.active becomes button.active.

⚙️ Rules and Limitations

Although nesting makes code more compact, there are a few rules to remember:

Each nested block must start with a valid selector.
You can't simply write properties after another nested rule.

✅ Correct:

.card { 
   color: #333; 
   header { 
      font-weight: bold; 
   }
}

❌ Incorrect:

.card { 
   color: #333; 
   header { font-weight: bold; } 
   font-size: 16px; /* Invalid: property after a nested block */
}

Don't overuse nesting.
If you nest too many levels (more than 3 or 4), your code becomes difficult to read.
Nesting is useful for logical structures, not for reproducing the entire DOM.

💡 Best Practices

Keep nesting “flat”: don't exceed 3 levels.
Use & explicitly for hover, focusand state variants.
Avoid unnecessary nesting if the selector is already clear or reused elsewhere.

Clean code example:

.card {
   padding: 1rem;
   background: white;
   border-radius: 8px;
   
   h2 {
      font-size: 1.2rem;
   }
   
   a {
      color: royalblue;
   
      &:hover {
         text-decoration: underline;
      }
   }
}

🚀 Compatibility and Tools

CSS nesting is natively supported in:

Chrome 112+
Safari 16.5+
Edge 112+
Firefox 117+

If you're working on projects that need to support older browsers, you can use PostCSS with the plugin postcss-nesting, which converts modern CSS into a more compatible.

🧾 Conclusion

CSS nesting is one of the most elegant and productive additions to the language in recent years.
It makes style sheets more modular, readable, and maintainable, without having to resort to external preprocessors.

If you haven't tried it yet, now's the perfect time to start writing more modern and tidy CSS!

References

MDN - CSS Nesting —https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

Techelopment

Cerca nel blog