CSS Nesting (Native)
debt(d3/e3/b3/t5)
Closest to 'default linter catches the common case' (d3). Standard CSS linters like Stylelint can catch common nesting mistakes such as excessive depth or missing & selectors. Browser DevTools will also show when styles aren't applying as expected due to nesting syntax errors.
Closest to 'simple parameterised fix' (e3). The quick_fix shows that migrating from Sass-style nesting to native CSS nesting involves adding & before nested selectors — a straightforward pattern replacement. Fixing deep nesting requires restructuring a few rules but remains localized to individual stylesheets.
Closest to 'localised tax' (b3). CSS nesting is a stylesheet-level choice that doesn't impose architectural constraints on the broader application. It affects CSS maintainability but doesn't cascade into PHP code or application structure. Future maintainers only need to understand nesting within CSS files.
Closest to 'notable trap' (t5). The misconception clearly states developers wrongly believe CSS nesting requires Sass — this is a documented gotcha. Additionally, common_mistakes shows the & requirement for element selectors differs from Sass conventions, and deep nesting creates the same specificity problems Sass users learned to avoid. Developers familiar with Sass syntax will trip on the subtle differences.
Also Known As
TL;DR
Explanation
CSS nesting was historically only available via Sass or Less preprocessors. The native CSS Nesting specification (now Baseline 2024) allows nesting rules inside other rules. The & selector refers to the parent rule's selector. Nesting combinators work: & + p means .parent + p. Media queries can nest: @media (max-width: 600px) inside a rule applies only to that rule's elements. Unlike Sass, native CSS nesting evaluates lazily by the browser — there is no compilation step. The specificity of nested rules is calculated at parse time as if they were flat. Browser support is now universal in Chrome 112+, Firefox 117+, Safari 17.2+ — covering all modern users.
Common Misconception
Why It Matters
Common Mistakes
- Omitting & before element selectors — 'p { }' inside a rule is ambiguous (is it a nested rule or a bare element?); use '& p { }' for clarity and compatibility.
- Using deep nesting (4+ levels) — native nesting inherits Sass's main pitfall: specificity explosion and hard-to-read stylesheets; limit to 2–3 levels.
- Not checking browser support for older projects — CSS nesting requires Chrome 112+, Firefox 117+, Safari 17.2+; for IE or very old browser support, stick with Sass.
- Mixing native nesting with PostCSS nesting plugin — they have subtle differences; choose one approach per project.
Code Examples
/* ❌ Repetitive flat CSS — no nesting */
.card { background: white; border-radius: 8px; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.card .title { font-size: 1.2rem; font-weight: 600; }
.card .title:hover { color: royalblue; }
.card .body { padding: 16px; color: #555; }
.card .body p { margin-bottom: 8px; }
/* Styles are scattered — hard to see the .card structure *//* ✅ Native CSS nesting — co-located, no build step */
.card {
background: white;
border-radius: 8px;
&:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
& .title {
font-size: 1.2rem;
font-weight: 600;
&:hover { color: royalblue; }
}
& .body {
padding: 16px;
color: #555;
& p { margin-bottom: 8px; }
}
/* Nested media query */
@media (max-width: 600px) {
padding: 12px;
}
}