CSS Nesting: Stable Bare Declarations (CSSNestingDeclarations)

concepts

1. Bare Declarations (render order)

   Edit a stylesheet with bare declarations after a nested rule. The card below repaints; the resolved background swatch shows that source order wins — gold beats white.

2. CSSOM mutate bare-decl blocks

   Programmatically insertRule / deleteRule bare-declaration blocks inside a parent rule at runtime. Watch the CSSOM tree update and the rendered card repaint — they are real, addressable CSSNestedDeclarations rules.

3. DevTools equivalence inspector

   Edit nested CSS and toggle between three engines: pre-Chrome-130 (hoisted bare decls), Chrome 130 (CSSNestedDeclarations wrappers), and a DevTools-style flattened view. Each tab also re-renders the preview card so you can see which versions paint the design correctly.

4. Specificity Explorer

   Choose a CSS nesting preset and analyse every bare declaration — shows which context each declaration belongs to (parent or CSSNestedDeclarations block), which property wins, and a side-by-side before/after Chrome 130 preview.

5. Component Cascade

   Edit a nested stylesheet for a real button or card component in a live editor. A CSSOM rule tree and cascade resolution table update in real time, showing exactly which CSSNestedDeclarations block each property comes from.

6. Migration Guide

   Step-by-step SASS/SCSS to native CSS nesting migration across five patterns: basic nesting, pseudo-classes, late overrides (the Chrome 130 fix), mixins to @layer, and @media inside rules.

why it shipped

Keeps bare declarations following a nested rule in their place, by wrapping those declarations in CSSNestingDeclarations rules during parsing.

references

• ChromeStatus entry
• Spec