@layer
A powerful way to organize your CSS into 'layers' of priority. It allows you to ensure that certain styles (like a theme) always override others (like a reset), regardless of selector specificity.
It is documented as part of the CSS Cascading and Inheritance specification.
Syntax
/* Usage Example */
@layer reset, base, theme;
@layer theme{
/* These styles have higher priority because 'theme' is defined last */
button{ background: blue; }
}
@layer reset{
button{ background: gray; }
}@layer Browser support
Widely available
Since
2022 94% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
99+
97+
15.4+
99+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more