Jxnblk
Blog

The Cascade is Not Inheritance

July 20, 2019

On more than one occasion, I've heard people conflate the cascade feature of CSS with inheritance. While it's an understandable thing to mix up because they are, in fact, related, I think it's important to use the correct terms when talking about technology like this.

Inheritance

Inheritance is when a child element inherits styles from one of its parent elements. Some (not all) CSS properties will automatically apply as a default value for child elements. This allows you to set a font family and color at the top level of a page and have all elements within that page use the same styles. Very cool.

The Cascade

The Cascade is the set of rules that a browser uses to determine which particular styles should apply to a given element, when there are conflicting rules. This is, in my mind, the trickiest part of the CSS language and it trips people up all the time.

The algorithm specified in CSS takes the following into consideration when applying styles:

  • Origin and Importance, which includes author, user agent, and user stylesheets
    1. Transition declarations
    2. Important user agent declarations
    3. Important user declarations
    4. Important author declarations
    5. Animation declarations
    6. Normal author declarations
    7. Normal user declarations
    8. Normal user agent declarations
  • Specificity, which is calculated based on selectors
  • Order of Appearance, which means the last declared rule wins

This quote from MDN's Introduction to CSS: Cascade and Inheritance sums it up pretty well:

If you didn't fully understand the cascade, specificity, and inheritance, then don't worry! This is definitely the most complicated thing we've covered so far in the course, and is something that even professional web developers sometimes find tricky.

Follow me on Twitter for more great content like this.