Write maintainable CSS with variables, nesting, mixins, modules, maps, and compiled output.
Lessons
Keep specificity low by limiting nesting depth.
Avoiding Over-Nesting is easiest to learn by reading the example, changing it, and observing the result.
.nav {
display: flex;
gap: 1rem;
li {
list-style: none;
a {
color: #1f2937;
&:hover { color: #4f46e5; }
}
}
}Practice the Avoiding Over-Nesting example in a small scratch file, then explain what changed and why.