Cascade Layers

Understand how theme, base, defaults, components, and utilities layers control style priority.

Override a component locally

CSS cascade layers give groups of declarations an order before selector specificity is compared. Keep reusable component styling in the components layer, then apply a utility when one instance needs a different value:

@layer components { .btn { display: inline-flex; } }

<div class="btn flex">Example</div>

@layer components {  .btn {    display: inline-flex;  }}@layer utilities {  .flex {    display: flex  }}

With the base layer order loaded, the normal display declaration in utilities takes precedence over the component declaration. The cascade contract describes the order and its scope.

Diagnose a competing declaration

1. Confirm both rules target the element and their conditions match.
2. Check which layer owns each declaration, including native CSS outside layers.
3. Keep broad defaults in their intended layer before adding local overrides.
4. Inspect importance and the native cascade when layer order alone does not explain the result.

Load the base stylesheet through the normal Master CSS entry. Generated rules contain their layer blocks; they do not add the base layer statement themselves.

Look up a rule

• How layers control the cascade
• Priority within and between layers
• The five layers
• Base
• Theme
• Defaults
• Components
• Utilities
• A complete flow
• Base is for normalization
• Defaults are for broad defaults
• Utilities can override components
• Summary
• Writing regular CSS
• Layer checklist