The Cascade

Origin & Importance
  1. ↔️ CSS Transitions
  2. 🖥 User Agent (Browser)
  3. 👥 User (Preferences)
  4. 🎨 Author (Site)
  5. 🔁 CSS Animations
  6. 🎨 Author (Site)
  7. 👥 User (Preferences)
  8. 🖥 User Agent (Browser)
(Shadow) Context
important
  1. 🫥 Shadow DOM
  2. ☀️ Host (Light) DOM
normal
  1. ☀️ Host (Light) DOM
  2. 🫥 Shadow DOM
Element-Attached Styles
important
  1. Inline Styles
  2. Selectors
normal
  1. Inline Styles
  2. Selectors
Cascade Layers (new!)
important
  1. » first-layer
  2. » …
  3. » last-layer
  4. un-layered styles
normal
  1. un-layered styles
  2. » last-layer
  3. » …
  4. » first-layer
Selector Specificity
  1. #id
  2. .class | :pseudo-class | [attribute]
  3. element | ::pseudo-element
  4. * | :where()
Scope Proximity (proposed)

Nearest scope root (in the DOM) wins

Order of Appearance

Last style wins!