CSS all and revert-layer: reset with a named boundary

When to use it

An embedded receipt preview inherits a third-party theme that changes button text and border styling. A blanket all reset can be tempting, but it also removes useful typography, spacing, and form appearance. Start by identifying which layer owns the bad declaration. In a layered stylesheet, revert-layer on the specific property can expose the result from an earlier layer without discarding every other setting. The sample keeps a base button color and resets only the theme layer's color choice for a specialized action. Test the result with the theme layer absent, with user styles, and in forced colors. The reset keyword is a cascade tool, not a shortcut around understanding origin, importance, specificity, and order.

@layer base, theme;
@layer base { .receipt-action { color: #173148; } }
@layer theme { .receipt-action { color: #fff; } .receipt-action--plain { color: revert-layer; } }

Cost and verification

The CSS bytes are small, but the maintenance cost is high if a broad reset silently strips inherited readability or native control cues. Revert-layer depends on a meaningful layer structure; without that structure it cannot express the intended boundary. All also does not reset custom properties, which may continue feeding later declarations. Inspect computed styles for color, font, line height, focus ring, and form appearance after any reset. Prefer a narrow property override when it states the decision clearly. Do not use a reset to paper over an unknown theme collision.

Common Mistakes

• Do not assume all clears custom properties.
• Do not use revert-layer without understanding the layer order.
• Do not strip control styles and forget focus or forced-color states.

Connected lessons

• CSS Property Decisions
• CSS cascade layers: set precedence before selectors grow
• CSS :is and :where: group selectors without accidental weight
• CSS invalid declarations and fallbacks: fail locally, not silently