💄
CSS
Frontend Web DevLanguages
  • Introduction
  • Architecture
    • Default Styles
    • Nesting
    • Layers
  • Page
  • layout
    • Grid
    • Flexbox
    • Container Queries
  • Group 1
    • Pseudo
  • More modern stuff
Powered by GitBook
On this page
  • Summary
  • More Info
  1. Architecture

Layers

Mid-2023 support at 91%

PreviousNestingNextPage

Last updated 1 year ago

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