Doing It Wrong

learn in public

Site Navigation

  • Home
  • Books
  • Work & Play

Site Search

You are here: Home / Development / The Cascade Algorithm

The Cascade Algorithm

posted on November 27, 2023

Four Stages of the Cascade Algorithm

The cascade algorithm is split into 4 distinct stages.

  1. Position and order of appearance: the order of which your CSS rules appear
  2. Specificity: an algorithm which determines which CSS selector has the strongest match
  3. Origin: the order of when CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS
  4. Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type

Order of Specificity for Origins

  1. User agent base styles. These are the styles that your browser applies to HTML elements by default.
  2. Local user styles. These can come from the operating system level, such as a base font size, or a preference of reduced motion. They can also come from browser extensions, such as a browser extension that allows a user to write their own custom CSS for a webpage.
  3. Authored CSS. The CSS that you author.
  4. Authored !important. Any !important that you add to your authored declarations.
  5. Local user styles !important. Any !important that come from the operating system level, or browser extension level CSS.
  6. User agent !important. Any !important that are defined in the default CSS, provided by the browser.

Order of Importance

  1. normal rule type, such as font-size, background or color
  2. animation rule type
  3. !important rule type (following the same order as origin)
  4. transition rule type

Filed Under: Development Tagged With: CSS

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Profile Links

  • GitHub
  • Buy Me a Coffee?

Recent Posts

  • Event Listeners
  • A Philosophy of Software Design
  • The Programmer’s Brain
  • Thoughts on Microservices
  • API Design Patterns

Recent Comments

No comments to show.

Archives

  • May 2025
  • September 2024
  • July 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • December 2022
  • December 2021

Categories

  • Development