Native CSS Nesting
Modern CSS supports nesting directly in stylesheets. Nesting can improve local readability when used carefully, but excessive nesting can recreate the specificity and coupling problems associated with deeply nested preprocessors.
Keep nesting shallow and avoid using it as a substitute for clear component boundaries.
Native CSS Nesting
Native Nesting
.card {
padding: 1rem;
& .title {
margin: 0;
}
&:hover {
transform: translateY(-2px);
}
}💡 The nested selectors are associated with the parent
.card rule.Key Takeaways
- Native nesting reduces the need for preprocessors in many cases.
- Keep nesting shallow to avoid complexity.
Knowledge Check
What is a major benefit of native CSS nesting?