A component rule acquires another class, then an ID, then an important declaration because a utility still will not win. The stylesheet becomes harder to reason about with every adjustment. Cascade layers offer a way to establish groups of precedence before comparing selector specificity.
Within the same origin and importance level, layer order is considered before specificity. For normal declarations, later layers take precedence over earlier ones. This lets a deliberately simple utility override a more specific component selector without entering a contest for the longest selector.
@layer reset, components, utilities;
@layer components {
.card .label { color: navy; }
}
@layer utilities {
.text-muted { color: #555; }
}In this small example, a label carrying the text-muted class receives the utility colour, assuming no other winning declaration applies. The order statement makes the intended relationship visible at the top of the stylesheet. It is an illustrative pattern to test in a local example, not a command to paste blindly into an existing site’s theme.
MDN’s specificity guide explains how layers interact with the wider cascade. Two details deserve particular attention: normal unlayered author styles outrank normal layered author styles, and important declarations reverse the layer precedence. Adding layers to half a stylesheet therefore does not automatically place all remaining rules under your new ordering scheme.
Inspect the winning declaration
Build a minimal page containing the element that behaves unexpectedly. In browser developer tools, identify the winning declaration, its origin, whether it is important and its layer. Only then compare specificity and source order where those comparisons apply.
When adopting layers, decide where third-party styles belong and where genuinely global exceptions will live. Name layers for a stable purpose rather than for a temporary fix. Repeatedly adding a new “last” layer simply recreates the disorder at a different level.
A useful review question is whether a colleague could predict the winner from the documented ordering. If the answer requires remembering several undocumented unlayered overrides, the migration is not finished. Layers work best as an explicit agreement about precedence, supported by a small rendered example and inspection of the actual cascade.