Layers are a new functionality in CSS that allows more control of the cascade and specificity of selectors. When using them, a 'stronger' layer will beat a stronger selector in a 'weaker' layer. [[20220801045127-css-specificity]] is only relevant inside a layer.
You can define as many layers as you want, such as a reset, base, theme, etc. This really helps you control how weak certain parts of your styling is, which is great for managing external libraries vs resets vs overrides etc.
As better explained in https://www.matuzo.at/blog/2023/cascade-layers-are-useless/, Cascade Layers allow you to better control the specificity through cascade layers, rather than specificity or hacks like !important. Adding a class like --error and styling that will work with our without layers, but crucially styling aria-invalid will usually not work as well.
Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way, without altering selectors or specificity within each layer, or relying on order of appearance to resolve conflicts across layers.
As of right now, this still doesn't really have browser support and unlayered styles are the strongest styles.
https://css-tricks.com/cascade-layers/