CSS Nesting and Stylesheet Organization

Modern CSS nesting keeps closely related rules together, while a consistent stylesheet structure prevents accidental overrides.

Native CSS nesting permits a rule within another rule: .panel { & h3 { color: navy; } }. The & represents the outer selector. For a modifier use &.featured.

Organize styles into foundations, components, and utilities. Keep nesting shallow so the selector remains understandable. The browser sees native nesting; no Sass or build step is required for supported browsers.

The browser combines the outer and nested selectors; .panel h3 stays local to a panel instead of targeting headings everywhere.

Define separate selectors for a card and its child.

HTML

<article class="panel"><h3>Daily summary</h3><p>Three updates</p></article>

CSS

.panel { background: #eff6ff; padding: 18px; border-radius: 10px; } .panel h3 { margin: 0 0 6px; color: #1e40af; } .panel p { margin: 0; }

Rendered output

Observe: All related rules apply to the same panel.

Express the same design using nested selectors.

HTML

<article class="panel"><h3>Daily summary</h3><p>Three updates</p></article>

CSS

.panel { background: #ccfbf1; padding: 18px; border-radius: 10px; & h3 { margin: 0 0 6px; color: #0f766e; } & p { margin: 0; } }

Rendered output

Observe: The nested child rules remain constrained to .panel.

The browser combines the outer and nested selectors; .panel h3 stays local to a panel instead of targeting headings everywhere.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Deeply nested selectors are difficult to override and debug.

• Nesting changes selector syntax, not DOM containment or source order.

Add &.highlighted within the panel rule, then apply the highlighted class in HTML.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Organize CSS around components and keep selectors predictable.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.