Native CSS nesting finally shipped in stable browsers in the last couple of years, and it is already reshaping how teams organize their design systems. Instead of duplicating selectors or relying on preprocessors, you can express relationships directly in the stylesheet and keep components portable across frameworks.
My approach: start with a single responsibility style block, then expose only the states and variants you need. Nesting keeps modifiers close to their parent rules, which makes handoffs and audits far easier for product teams.
.card {
display: grid;
gap: 0.75rem;
padding: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
& > h3 {
font-size: 1.25rem;
margin: 0;
}
& > .cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
&:hover {
color: var(--color-accent);
}
}
}Notice how the call-to-action styling lives directly under the card definition. When designers iterate, you are only touching one code block, and you can still promote shared tokens across the rest of the system.