Summary

  • W3C's first public CSS Cascade Level 5 draft appeared on 19 January 2021 with @layer. Authors could establish an explicit order among groups of styles instead of making every selector fight for precedence by specificity or source position.
  • By the 13 January 2022 Candidate Recommendation Snapshot, normal declarations in later layers beat those in earlier layers; !important reverses that layer order. Unlayered normal declarations sit in an implicit final layer.

The button had three dress codes. A reset stylesheet tried to make it plain, a component rule gave it a brand color, and a local patch had been slipped in late on Friday. The browser would choose a value by the cascade's established criteria. The humans, meanwhile, were changing selectors to make a rule win, then changing them again when another file arrived. They needed to agree on the order of the rulebooks before holding auditions for individual selectors.

The W3C's first public CSS Cascade Level 5 draft, dated 19 January 2021, gave that agreement a name: cascade layers. @layer let authors place declarations into explicitly ordered groups. The CSS Working Group's announcement described the attraction sharply. Authors could order the layers without rewriting selectors, altering specificity within each layer or hoping that a pile of stylesheets happened to load in a fortunate order. The seating chart became a rule of the room.

Imagine the reset in one layer, a shared component library in another and the publication's own adjustments in a later one. For ordinary declarations competing over the same property, the later layer has priority. The comparison of selector specificity comes afterward, among rules still tied at the higher stages of the cascade. A selector with an impressive row of classes in an earlier normal layer can lose to a simple class in a later one. The team can make its local choice clear without building a skyscraper of #id and !important just to be heard.

There is a twist, and it matters. For declarations marked !important, the layer order runs the other way: the earlier layer wins. This lets an earlier layer defend a critical value against later overrides when importance is deliberately used. The 13 January 2022 Candidate Recommendation Snapshot states both directions in its cascade sorting rules. Layer rank is considered before specificity. A developer reading the final button color needs to know which contest is taking place: ordinary declarations or important ones.

Rules outside explicit layers get a seat too. In the 2022 model, unlayered declarations occupy an implicit final layer. For normal declarations, that gives them priority over normal rules in the named layers. A patch written outside the seating chart can still jump the queue. The choice is useful for gradual adoption, but it deserves attention when a team expects its layered plan to settle every conflict. The 29 August 2021 Working Draft records how the treatment of unlayered rules was revised after the first public draft.

The same August draft documented revert-layer, a way to roll a property back to the value it would have received from an earlier layer. That gave the author a more precise escape route than tossing the entire stylesheet overboard. Layer names could be nested; imported styles could be assigned to a layer. The point was to express the intended relationship among different sources of style, rather than let every local selector negotiate the whole site anew.

The W3C publication history traces the January 2021 first public Working Draft through later drafts to the January 2022 Candidate Recommendation Snapshot. The sequence matters because the precedence of unlayered rules and the rollback vocabulary changed along the way. What stayed constant was the problem: large stylesheets combine people, libraries and patches with different claims to authority. Cascade layers made that authority something authors could declare openly.

The browser still does the comparison. Specificity still has work inside each layer, and a reader's page still ends up with one computed button color. The change is upstream: the team can tell CSS which rulebook speaks first and which one gets the last word. Friday's patch remains possible. It can no longer pretend nobody wrote a seating chart.