LLM Best Practices

Cascade

2 min read

View markdown source

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 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

@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.

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

Citing this term

See Cascade (llmbestpractices.com/glossary/cascade).

Graph View

Backlinks