Cascade in CSS is the system that decides which style declaration wins when more than one rule can apply to the same element. It is the reason CSS is called Cascading Style Sheets. Without the cascade, every conflict between browser styles, theme styles, component styles, utility classes, and inline styles would be unpredictable.
The cascade is not only about specificity. Specificity matters, but it is only one part of the decision process. CSS also considers origin, importance, cascade layers, specificity, source order, and inheritance. Once you understand this order, most CSS override problems become much easier to debug.
What the Cascade Solves
Many rules can target the same element. A button may receive browser default styles, a reset, base button styles, component styles, a utility class, a hover state, and an inline style from JavaScript. The cascade decides the final computed value for each property.
button {
color: black;
}
.button {
color: white;
}Both rules can target a button with class button. The class selector wins because it has higher specificity than the element selector.
Cascade Order
The cascade compares declarations in a defined order. A simplified practical order is importance and origin, cascade layer, specificity, scoping proximity, and source order. Most everyday debugging focuses on layers, specificity, and source order, but the full model explains edge cases.
| Step | Question |
|---|---|
| Origin and importance | Where did the rule come from, and is it important? |
| Cascade layer | Which layer has priority? |
| Specificity | Which selector is stronger? |
| Source order | Which matching rule appears later? |
Origins in CSS
CSS can come from different origins. User-agent styles are browser defaults. Author styles are the CSS written by the website or application. User styles are styles chosen by the user, such as accessibility preferences or custom stylesheets.
Most developers mainly work with author styles, but browser defaults still matter. A heading is bold and large by default because the browser stylesheet gives it those styles. Your CSS can override those defaults.
!important and the Cascade
The !important flag changes the normal priority of a declaration. It should be used rarely because it makes future overrides harder.
.button {
background: red !important;
}This declaration can beat many normal declarations, even if their selectors are more specific. Use it only when the architecture calls for it, such as utility overrides or third-party CSS fixes.
Cascade Layers
Cascade layers let you define priority groups in CSS. They are useful for organizing resets, base styles, components, and utilities.
@layer reset, base, components, utilities;
@layer base {
button {
font: inherit;
}
}
@layer utilities {
.text-center {
text-align: center;
}
}Layer order matters. Later layers have higher priority than earlier layers for normal declarations. This can reduce specificity fights because layer priority can handle broad ordering.
Specificity in the Cascade
If declarations are in the same origin, importance level, and layer, specificity is compared. ID selectors beat class selectors. Class selectors beat element selectors.
#header .button {
color: red;
}
.button {
color: blue;
}The first rule wins because it has an ID selector. Source order would not matter unless specificity is equal.
Source Order
When competing declarations have equal priority and specificity, the later rule wins.
.alert {
color: orange;
}
.alert {
color: red;
}The alert text becomes red because the second rule appears later and has equal specificity.
Inheritance and the Cascade
Some properties inherit from parent elements, such as color, font-family, and line-height. Others do not, such as margin, padding, border, and background.
.article {
color: #374151;
}
.article h2 {
color: #111827;
}The heading would inherit the article color if it had no direct color rule. The direct heading rule wins because direct declarations beat inherited values.
Browser Defaults
Browser default styles are part of the cascade. They give elements useful default behavior before author CSS runs. Resets and normalize stylesheets exist because teams often want a more consistent starting point across browsers.
Do not assume a style came from your CSS. If a margin, font, or display value appears unexpectedly, inspect the computed styles. It may come from the browser stylesheet.
Cascade Layers vs Specificity
Cascade layers can make a low-specificity rule in a later layer beat a higher-specificity rule in an earlier layer. This is why layers are powerful for CSS architecture.
@layer components {
#special-card .title {
color: red;
}
}
@layer utilities {
.text-blue {
color: blue;
}
}If the utilities layer comes after the components layer, the utility can win even though its selector is less specific. Layer order is checked before specificity inside the same importance level.
Practical Cascade Strategy
A maintainable stylesheet usually has a clear cascade strategy. Put broad defaults early, components after defaults, and utilities or overrides later. Keep specificity low so the cascade stays flexible.
- Use resets or base styles first.
- Use component classes for reusable UI.
- Use utilities in a predictable layer or order.
- Avoid IDs for normal styling.
- Avoid random !important declarations.
- Inspect computed styles before increasing selector strength.
Debugging Cascade Problems
When a style does not apply, open browser developer tools and inspect the element. The styles panel shows which rules match, which declarations are crossed out, and which declaration wins.
Check the cascade in order. Is there an important rule? Is a later layer winning? Is specificity higher? Is the winning rule simply later in the file? Guessing usually wastes time.
Cascade and Resets
CSS resets are usually placed early in the cascade because they create a consistent starting point. A reset should not fight components. It should remove browser inconsistencies and let later base or component styles define the actual design.
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
}
@layer components {
.card {
border-radius: 12px;
}
}This structure makes the reset intentionally weaker than the component layer. The reset provides a foundation, while the component layer controls real UI decisions.
Cascade and Utilities
Utility classes often need to win over component defaults. This does not mean they always need !important. Cascade layers or source order can give utilities predictable priority.
@layer components {
.card-title {
text-align: left;
}
}
@layer utilities {
.text-center {
text-align: center;
}
}If the utilities layer comes later, .text-center can override the component title alignment without a heavy selector. This keeps utility CSS simple.
Cascade and Component Variants
Component variants should be written so the cascade is obvious. A base component class defines normal styling. A modifier or state class overrides only what changes.
.alert {
border-left: 4px solid #2563eb;
background: #eff6ff;
}
.alert.is-danger {
border-left-color: #dc2626;
background: #fef2f2;
}The variant selector is slightly more specific and clearly related to the base component. This is better than placing a danger override far away with an unrelated selector.
Cascade and Media Queries
Media queries do not automatically beat normal rules because they are media queries. Normal cascade rules still apply inside them. If two matching selectors have the same specificity, the later matching rule wins.
.grid {
gap: 1rem;
}
@media (min-width: 900px) {
.grid {
gap: 2rem;
}
}This works because the media query rule appears later with the same selector. For mobile-first CSS, place larger breakpoint rules after base styles so the cascade builds upward naturally.
Practical Cascade Checklist
- Put broad resets before base styles.
- Put base styles before components.
- Put utilities or overrides in a clear later layer.
- Keep component selectors low and predictable.
- Use state classes for state changes.
- Use DevTools to inspect the winning declaration.
Cascade in Real WordPress Themes
WordPress sites often combine theme CSS, plugin CSS, block editor CSS, page builder CSS, and custom CSS. The cascade decides which one wins. This is why a rule may work in one page template but not in another.
The practical fix is not always a stronger selector. Sometimes the stylesheet needs to load later, the rule needs to be placed in a better layer, or the component needs a clearer class. Understanding the cascade prevents random trial and error.
Inline Styles from Tools
Page builders and JavaScript often add inline styles. Inline styles are strong in the cascade, so normal stylesheet rules may not override them.
<div class="box" style="color: red;">Text</div>If a tool generates inline styles, inspect whether the value can be changed from the tool settings. Overriding inline styles with !important should be a last resort, not the default approach.
Cascade Maintenance Rule
If a stylesheet keeps needing stronger selectors, the cascade structure is probably weak. Pause and reorganize the layers, order, or component API instead of continuing the specificity race.
Debugging Cascade Step by Step
When a style does not apply, do not immediately rewrite the selector. First inspect the element and find the crossed-out declaration. The browser will show which rule wins, where that rule comes from, and whether the losing rule lost because of importance, layer order, specificity, or source order.
This habit is important in real projects because CSS bugs often come from loading order rather than wrong syntax. A plugin stylesheet may load after the theme, a block style may appear later than expected, or a utility class may override a component rule. Once you know the exact reason, the fix becomes smaller and safer.
A good cascade fix should be easy to explain. If the explanation is only “I added a stronger selector until it worked”, the stylesheet will probably become harder to maintain later.
Common Cascade Mistakes
- Thinking specificity is the whole cascade.
- Using !important before checking the actual winning rule.
- Ignoring cascade layers.
- Writing broad rules late in the stylesheet and overriding components accidentally.
- Forgetting browser defaults exist.
- Not checking inherited values separately from direct declarations.
Cascade in CSS FAQ
What is cascade in CSS?
The cascade is the CSS decision system that chooses which declaration wins when multiple rules apply.
Is cascade the same as specificity?
No. Specificity is only one part of the cascade.
What wins, specificity or source order?
Specificity wins first. Source order matters when competing declarations have equal priority and specificity.
What are cascade layers?
Cascade layers are named priority groups that help organize CSS and reduce specificity fights.
Continue learning CSS in order
Follow the topic sequence with the previous and next lesson.