---
title: "Cascade"
slug: "cascade"
category: "glossary"
tags: ["glossary", "css", "cascade", "specificity", "inheritance", "frontend"]
status: "stable"
last_updated: 2026-08-14
summary: "CSS cascade is the algorithm that resolves conflicts when multiple rules target the same property, weighing origin, layer, specificity, and source order."
related:
  [
    "[[glossary/specificity]]",
    "[[glossary/custom-property]]",
    "[[glossary/has-selector]]",
    "[[frontend/css]]",
    "[[cheatsheets/css-selectors]]",
  ]
---

## Overview

This page is the atomic definition. Full CSS layout and selector guidance lives at [[frontend/css]] and [[cheatsheets/css-selectors]]. The cascade is the ordered algorithm (origin, layers, specificity, source order) that resolves which declaration wins when multiple rules target the same property.

## Definition

The cascade is the algorithm CSS uses to resolve conflicts when multiple declarations target the same element and property. Resolution follows a priority stack, evaluated in order:

1. Origin and importance. Browser UA styles lose to author styles; author `!important` beats author normal; UA `!important` beats author `!important`.
2. Cascade layers. Declarations in later `@layer` blocks beat earlier ones. Unlayered styles beat all layers.
3. Specificity. Among declarations at the same layer and importance, the one with the highest [[glossary/specificity]] wins.
4. Source order. When specificity ties, the last declaration in source order wins.

Properties not set by any rule may inherit from the parent element (text properties like `color` and `font-size` inherit by default; layout properties like `width` do not) or fall back to the browser's initial value.

## When it applies

The cascade resolves every property on every element during the style computation phase. Understanding cascade order matters when overrides fail silently: check whether the winning rule is in a higher-priority layer or origin before adjusting specificity. Use `@layer` to establish override order between third-party styles and your own; put third-party imports in an early layer so your unlayered styles always win without `!important`.

## Example

```css
@layer base, components, utilities;

@layer base { p { color: navy; } }

@layer components { .card p { color: teal; } }

/* Unlayered -- beats all layers */
p { color: black; }
```

Even though `.card p` has higher specificity than the unlayered `p` rule, the unlayered rule wins because it sits outside any layer. Cascade layer order takes priority over specificity.

## Related concepts

- [[glossary/specificity]] - the third step in cascade resolution; often confused with the full cascade.
- [[glossary/custom-property]] - custom properties cascade normally but do not inherit computed values the same way.
- [[glossary/container-query]] - container queries are resolved after the cascade, during layout.
- [[frontend/css]] - the full CSS deep-dive.
- [[cheatsheets/css-selectors]] - selector reference with specificity weights.

## Citing this term

> See [[glossary/cascade|Cascade]] (llmbestpractices.com/glossary/cascade).

## Related

- [[glossary/specificity]]
- [[glossary/custom-property]]
- [[glossary/has-selector]]
- [[frontend/css]]
- [[cheatsheets/css-selectors]]