CSS Nesting with Stylelint Compliance

Flat-to-nested CSS conversion breaks when done incrementally because each edit shifts specificity ordering, triggering cascading linter errors. This skill prevents that by requiring upfront analysis before any edits.

When This Applies

• Converting flat CSS selectors to nested & syntax
• Fixing no-descending-specificity or no-duplicate-selectors errors after nesting
• Any CSS restructuring that changes selector source order

The Two Rules You Must Satisfy

no-descending-specificity

Selectors matching the same DOM element must appear in ascending specificity order in source. A .foo (0,1,0) appearing after .bar:hover .foo (0,3,0) is an error because both can match a .foo element.

Selectors matching different elements don't conflict regardless of order.

no-duplicate-selectors