Layers for a stylesheet you inherited

Fork the starter. It is a page using a third-party CSS framework plus a local stylesheet, and the local stylesheet is losing fights it should win. There are eleven !important declarations in it, all added by a previous developer who was in a hurry.

The goal: remove all eleven, and have the page look identical, using layers instead.

Declare your order first, at the top of the file, before any rules: @layer reset, vendor, base, components, utilities;. That single line establishes precedence for the whole document, and it is useful to understand what it buys, precedence is now decided by which layer a rule is in, not by how specific it is. A one-class rule in utilities beats a five-selector rule in vendor. That is the point.

Wrap the third-party framework in @layer vendor by importing it with @import url(...) layer(vendor);. Put your own resets in reset, element defaults in base, component styles in components, and single-purpose overrides in utilities. Then delete the !importants one at a time, checking the page after each.

Now learn the rule that catches everyone: unlayered styles beat all layered styles. Anything you leave outside a layer sits above the entire stack. This is occasionally useful as an escape hatch and much more often an accident, a stray rule at the bottom of a file that you forgot to wrap, silently outranking a system you carefully designed. When a layer system "does not work", this is nearly always why.

Finish by writing three lines at the top of the stylesheet explaining the layer order to the next person. The order is a design decision and it is invisible unless someone writes it down.