Write maintainable CSS with variables, nesting, mixins, modules, maps, and compiled output.
Lessons
Place media queries inside the selector they affect.
Nesting Media Queries 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 Nesting Media Queries example in a small scratch file, then explain what changed and why.