An Introduction to the Cascade
Tags: css, cascade, spec
Published: 2020-10-31 06:23:42

---
title: An Introduction to the Cascade
published: true
date: 2019-06-16 00:00:00 UTC
tags: css, cascade, spec
canonical_url: https://toddl.dev/posts/an-introduction-to-the-cascade/
---

This is just an introduction in a condensed form. Just a minor basic level overview of the cascade.

[The CSS Cascade Level 4 Spec states](https://www.w3.org/TR/css-cascade-4/#cascading);

> The cascade takes a 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.

There is an order in which selectors are prioritized. Importance, scope, specificity, and order. Let's go over each priority starting with importance. You don't have to take it all in at once. Break down each part until you understand it and then move on to the next section. I have provided code examples along the way.

### Importance

An `!important` declaration takes precedence over a normal declaration. Such as when the star selector is used for site-wide styling, take for instance `box-sizing: border-box;` and then the same property (in this case below, `background-color`) is using it in the case of the `body` selector. So `background-color: red !important;` will overrule the `background-color: white;`.

```
* { background-color: white;}body { background-color: red !important;}
```

- Transition declarations `transition-timing-function: steps(6, end);` or `transition: all .25s ease-in-out;`

- Important user agent declarations

```
input, textarea, keygen, select, button, meter, progress { -webkit-writing-mode: horizontal-tb !important;}
```

- Important user declarations `p { text-indent: 1em !important; }`

- Important author declarations `p { text-indent: 1.5em !important; }`

- Animation declarations

```
@keyframes slide-right { 50% { margin-left: 110px; opacity: 0.9; } to { margin-left: 200px; }}
```

- Normal author declarations `p { text-indent: 1.5em; }`

- Normal user declarations `p { text-indent: 1em; }`

- Normal user agent declarations `keygen, select { border-radius: 5px; }`

Read more about [Transition declarations](https://www.w3.org/TR/css-cascade-4/#biblio-css-transitions-1) here.  
Read more about [Animation declarations](https://www.w3.org/TR/css-cascade-4/#biblio-css-animations-1) here.

### Scope

A declaration can be scoped to a subtree so that it only affects its scoping element and that element’s descendants. An example is `html` to `body`.

> If the scoping elements of two declarations have an ancestor/descendant relationship, then for normal rules the declaration whose scoping element is the descendant wins, and for important rules the declaration whose scoping element is the ancestor wins.

So in other words, for normal declarations the inner scope's declarations override but for the `!important` rule the outer scope's declarations override. Later wins over earlier.

```
h1 { color: red;}/* This one wins */h1 { color: green;}

/* This one wins due to specificity */.title__heading { font-size: 2em;}h1 { font-size: 2.8em;}
```

> One thing you should bear in mind when considering all this cascade theory, and what styles get applied over other styles, is that all this happens at the property level — properties override other properties, but you don't get entire rules overriding other rules. When several CSS rules match the same element, they are all applied to that element. Only after that are any conflicting properties evaluated to see which individual styles will win over others.

[A not on rule mixing](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#A_note_on_rule_mixing)

### Specificty

- Inline styles (anything between `<style></style>` tags)
- ID selectors
- Classes / pseudo-selectors
- Type selectors (for example, `h1`) & pseudo-elements (`::before`)

### Order

The last declaration in document order wins. The order in which you load your stylesheets actually matters. If you’ve got two stylesheets linked in the head of your HTML document, the second stylesheet will override rules in the first stylesheet. This is why resets and `@imports` are loaded before anything else in the main stylesheet you are using.

### Summary

I have seen a lot of folks frustrated that they don't understand CSS. Some of animosity towards learning it, some disdain towards it. Knowing the cascade benefits the developer. The fundamental knowing of the cascade and how the cascade works will benefit you in the long run. I offer you some suggestions.

The spec may look daunting and the language may look foreign, but when it comes down to it, it really isn't. If I can get it, from reading the spec then anyone can get it. There are some brilliant folks out there who knows JavaScript like the back of their hand. When it comes to CSS and the cascade, they say that it is a concept they cannot fully grasp.

You don't need to know the entire spec (for anything) page-for-page, word-by-word. I've been doing this for 21+ years and still have to look things up.

I learn best by breaking things down to their core. Piece by piece. Breaking the cascade down to bits and pieces (just think of Atomic Design - Atoms, Molecules, Organisms) and dissecting those until I fully grasp the concept(s).

Feel free to reach out with any questions I may be able to answer.