css nesting

CSS Nesting — Write Cleaner, Scoped Styles

by

Do you still rely on SCSS or preprocessors just to nest CSS rules? Good news: native CSS Nesting is here! With native nesting, you can scope related selectors directly inside parent rules, keeping your stylesheets clean, readable, and easier to maintain — no extra build tools needed. In this MiniCoursey quick guide, you’ll learn how CSS Nesting works, what syntax to use, and best practices for writing organized, DRY styles.

What is CSS Nesting?

CSS Nesting lets you write child selectors inside a parent rule. It works like nesting in SCSS or Less — but directly in plain CSS!

Basic Syntax

Use the & symbol to refer to the parent selector. Nest any valid selectors inside.


.card {
  padding: 1rem;

  & h2 {
    margin: 0;
  }

  & .button {
    display: inline-block;
  }
}

This means h2 and .button are scoped to .card only — no more redundant selectors!

Why Use Nesting?

  • Group related styles together for readability.
  • Avoid repeating long parent selectors.
  • Write scoped styles for components and blocks.

💡 Pro Tip: Nest only when it makes sense — deep nesting can become hard to read fast.

⚠️ Common Mistake: Avoid nesting more than 2–3 levels deep. Keep selectors flat for maintainability.

FAQ

Q: Does nesting add specificity?
A: No, it just expands to normal selectors — specificity works as usual.

Q: Is browser support good?
A: It’s landing in modern browsers — check MDN for latest support or use a fallback preprocessor if needed.

Related Link

👉 Check out previous: CSS Specificity Wars — How to Avoid Them

Where to Learn More

Explore MDN’s CSS Nesting docs and try rewriting old SCSS files with native syntax — it’s future-ready and cleaner.

Conclusion

Congrats — you now know how to use CSS Nesting for clean, scoped styles! Modern CSS just got a whole lot more organized.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment