The CSS Cascade

Last updated 1 year ago by Amelia Wattenberger


We style our websites using CSS, which stands for Cascading Style Sheets.
But what does Cascading really mean?

The CSS Cascade is one of the most powerful parts of CSS. But it can also be very frustrating, if not well understood. Anyone who’s worked on a large enough website has complained "Why won’t this CSS property work?!" And we’ve all been tempted to throw an !important to strong-arm things into place.

To save ourselves from future angst, let’s take a step back and learn this thing for real.

The CSS Cascade is the way our browsers resolve competing CSS declarations.

Every time we write a CSS declaration (or rule), it will enter the CSS Cascade, which will determine whether or not it will end up as the final style. The further down the cascade a declaration falls, the less likely it will end up as the final style.

Let’s take a look at the different tiers of the Cascade.


The first tier of the Cascade looks at the type of rule we’re looking at.

There are four basic types of rules:

  • 1.

    Rules that apply to an active transition take the utmost importance

  • 2.

    When we add !important to the end of our declaration, it jumps to this level of the Cascade. Ideally, you reserve this level for Hail Marys, which are needed to override styles from third-party libraries.

  • 3.

    Rules that apply to an active animation jump up a level in the Cascade

  • 4.

    This level is where the bulk of rules live

As you can see, this top tier is mostly reserved to ensure our elements animate properly, and to help out desparate developers (!important).

Read full Article