CSS Specificity, the Cascade and Cascade Layers @layer

Technical Deep Dive & Specifications

The Complete 6-Step Cascade Algorithm (CSS Cascading Level 5)

When a browser determines the computed value of a CSS property on an element, it sorts all matching declarations through the following sequence:

                      MATCHING DECLARATIONS
                                |
                                v
               [ Step 1: Origin & Importance ]
             (User Agent vs Author vs !important)
                                |
                                v
                   [ Step 2: Context / Scoping ]
                   (Shadow DOM vs Light DOM)
                                |
                                v
                 [ Step 3: Cascade Layers (@layer) ]
                (Reset -> Framework -> App -> Utilities)
                                |
                                v
                     [ Step 4: Specificity ]
                       (a , b , c , d)
                                |
                                v
                     [ Step 5: Scope Proximity ]
                    (Proximity in nested trees)
                                |
                                v
                    [ Step 6: Order of Appearance ]
                    (Last declared in source wins)
                                |
                                v
                         WINNING VALUE

The 4-Tier Specificity Vector (a, b, c, d)

Specificity is calculated as a 4-component tuple (a, b, c, d). Comparison proceeds left to right. If column a is larger, that rule wins—regardless of the values in columns b, c, or d.

+-----------------------------------------------------------------------------------------+
|                                SPECIFICITY TIER MATRIX                                  |
+---+----------------------------+-----------------------------+--------------------------+
|Col| Category                   | What Counts?                | Examples                 |
+---+----------------------------+-----------------------------+--------------------------+
| a | Inline Styles              | style="..." attribute       | <p style="...">          |
| b | ID Selectors               | #identifier                 | #header, #nav-primary    |
| c | Classes, Attributes,       | .class, [attr], :hover,     | .btn, [type="text"],     |
|   | Pseudo-classes             | :focus, :nth-child(), :has()| :first-child             |
| d | Elements, Pseudo-elements  | element tags, ::before,     | p, div, span, h1,        |
|   |                            | ::after, ::placeholder      | ::before, ::first-line   |
+---+----------------------------+-----------------------------+--------------------------+

Crucial Rule: Specificity is NOT a base-10 number. (0, 1, 0, 0) is strictly greater than (0, 0, 100, 0). You cannot override an ID selector simply by chaining 100 class names together!

Specificity Calculation Examples:

Special Modern Pseudo-Class Specificity Rules:

• :where(): Always has zero specificity (0, 0, 0, 0). Ideal for resets and base library defaults!
• :is() and :has(): Takes the specificity of its most specific argument inside the parentheses.
• :not(): Adds the specificity of its most specific argument (the :not wrapper itself adds 0).

Origin & !important Mechanics

Declarations come from three origins: User Agent (browser defaults), User (user settings/extensions), and Author (your website's CSS).

Normally, Author styles beat User Agent styles. However, when !important is added, the priority order inverts:

+-----------------------------------------------------------------------------------+
|                        CASCADE ORIGIN & IMPORTANCE LADDER                         |
+-----------------------------------------------------------------------------------+
| 8. (HIGHEST) Transition declarations                                              |
| 7.           User Agent !important (e.g. forced accessibility high contrast)      |
| 6.           User !important                                                      |
| 5.           Author !important                                                    |
| 4.           Animation declarations                                               |
| 3.           Normal Author declarations (Your standard CSS)                       |
| 2.           Normal User declarations                                             |
| 1. (LOWEST)  Normal User Agent declarations (Browser defaults)                    |
+-----------------------------------------------------------------------------------+

Modern Cascade Layers (@layer)

Historically, developers fought third-party libraries (like Bootstrap) using high-specificity selector hacks (div#app .main-content .btn) or !important.

CSS Cascade Layers (@layer) completely solve this by allowing authors to explicitly define the order of precedence between different architectural strata, regardless of selector specificity.

Declaring Layer Order:

/* 1. Define the global layer order from lowest to highest priority */
@layer reset, framework, design-system, utilities;

/* 2. Framework rules (even with high specificity!) */
@layer framework {
  #sidebar .menu-item.active {
    background-color: #e2e8f0; /* Specificity: (0, 1, 2, 0) */
  }
}

/* 3. Design System rules (lower specificity, but WINS because it is in a later layer!) */
@layer design-system {
  .menu-item {
    background-color: #3b82f6; /* Specificity: (0, 0, 1, 0) */
  }
}

In the example above, .menu-item in @layer design-system wins over #sidebar .menu-item.active in @layer framework because design-system is declared after framework in the master @layer statement!

Key Rules of @layer:

1. Layer Order Wins Over Specificity: A rule in a higher-priority layer always defeats a rule in a lower-priority layer.
2. Unlayered Styles Win: Styles outside any @layer have higher precedence than all normal layered styles.
3. !important in Layers Reverses Order: An !important declaration in an earlier layer beats an !important declaration in a later layer (preserving defense against overrides).

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 8 (@layer reset, base, components, overrides;): Defines the global precedence hierarchy. Any rule in overrides beats components, which beats base, which beats reset.
• Lines 18–26 (#action-container button.btn): Has a specificity of (0, 1, 1, 1). In traditional CSS, this would override almost everything.
• Lines 28–34 (.btn-primary): Has a specificity of only (0, 0, 1, 0). Because it lives in @layer components (which is ranked higher than @layer base), it effortlessly overrides the ID-based rule without needing !important!
• Lines 42–44 (.emergency-override): Unlayered styles sit at the absolute top of normal CSS precedence.

Expected Browser Render Output

Cascade Layer Demonstration
Notice how .btn-primary (Layer: components) beats #action-container button.btn (Layer: base)...

[ Primary Action ] (Blue background, White text, Red focus ring)
[ Delete Record  ] (Red background, White text)