Understanding CSS Cascade, Inheritance, and Specificity
This article explains the core concepts of CSS—cascade, inheritance, and specificity—detailing how browsers resolve conflicting style rules, the role of source order, importance, selector weight, and newer features like @layer, while providing practical code examples and visual illustrations.
CSS has three essential concepts that every developer must master: cascade , inheritance , and specificity . This article focuses on cascade and inheritance, leaving specificity for the selector chapter.
Cascade
The cascade is the algorithm browsers use to decide which CSS rules apply to an element. It sorts declared values by precedence and outputs a single cascaded value. The highest‑priority source (author, user, or user‑agent) wins, followed by selector weight and source order.
The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.
When multiple conflicting declarations target the same element, the browser evaluates them in this order:
Origin and importance (author !important, user !important, user‑agent !important)
Selector specificity
Source order
Initial and inherited values
Origin and Importance
Rules come from three origins:
Author : styles written by the developer.
User : user‑defined styles, often for accessibility.
User‑Agent : browser default styles (e.g., input appearance).
Author rules normally outrank user rules, which outrank user‑agent rules. Adding !important raises a rule’s importance, pushing it ahead of normal rules.
Selector Specificity
Specificity is calculated as a four‑part value a‑b‑c‑d where:
a = inline style (1 if present, otherwise 0)
b = number of ID selectors
c = number of class, attribute, and pseudo‑class selectors
d = number of element and pseudo‑element selectors
/* a=0 b=0 c=0 d=0 */
{}
/* a=0 b=0 c=0 d=1 */
li {}
/* a=0 b=0 c=0 d=2 */
ul li {}
/* a=0 b=1 c=0 d=0 */
#x34y {}
/* a=1 b=0 c=0 d=0 */
style="" {}Source Order
If two selectors have identical specificity, the one that appears later in the stylesheet wins. Therefore, the order in which stylesheets are linked inside <head> matters.
Inheritance
Each CSS property is defined as either inherited or not. Inherited properties (e.g., font-size , color ) take the computed value from the parent element when no value is specified; non‑inherited properties (e.g., border ) fall back to their initial value.
html {font-size: small;}Developers can control inheritance using the keywords initial , inherit , unset , revert , and the shorthand all .
initial
Resets a property to its default value defined by the specification. Example:
p {display: initial;}inherit
Forces a property to take the computed value of its parent, useful for non‑inherited properties like border :
<div class="wrapper" style="border:5px solid blue;">
<div style="border: inherit;">...</div>
</div>revert
Resets a property to the value it would have had without any author styles, effectively falling back to user‑agent defaults.
unset
Acts as inherit for inherited properties and initial for non‑inherited ones.
all
The all shorthand can reset every property (except unicode-bidi and direction ) to initial , inherit , or unset . Example:
div {all: inherit;}
strong {all: initial;}@layer Rule
Modern CSS introduces @layer to create named cascade layers, giving developers finer control over rule ordering without relying on naming conventions like ITCSS.
@layer utilities;
@layer components, utilities;Layers sit between author styles and selector specificity, allowing explicit ordering of groups of rules.
Conclusion
The cascade, inheritance, specificity, source order, and new @layer feature together determine how CSS styles are applied. Understanding these mechanisms helps write less code, avoid fragile overrides, and maintain large stylebases more effectively.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.