@layer: ordering style groups before specificity

Useful to know

@layer creates named or anonymous layers of the cascade. For normal declarations, the later layer takes precedence over the earlier one before comparing the specificity of the selectors. [1]

Sample declaration is @layer reset, base, components;. The rules are then placed in the corresponding blocks. Normal styles outside layers take precedence over normal styles in them, so mixing requires attention. In !important, the order of layers is reversed. Don't use this technique just as another way to increase the power of individual selectors.