Layers

Mid-2023 support at 91%

Summary

The @layer selector is a way to group styles together in order to prioritize the cascade, eliminating the need for overrides using !important

Example below. The tricky thing however is that a project needs to fully implement layers. Any un-layered styles will override layer styles.

@layer reset /* lowest priority style */
@layer theme /* next higher priority style */
@layer global /* next higher priority style */
@layer layout /* next higher priority style */
@layer components /* next higher priority style */
@layer utilities /* next higher priority style */
@layer states /* highest priority style */

More Info

CSS Layers, by Stephanie Eckles

Can I Use CSS Layers

Last updated