A visual explainer of the CSS Cascade, the algorithm that determines the "winning value" from a list of competing declarations.
Live site: cascade.arpit.codes
The seven cascade steps are laid out as a hand-drawn staircase diagram. Each step is a disclosure widget: click it to reveal the order of precedence within that step, or the rule that decides it.
- Origin and importance — transition,
!importantbrowser/user/author, animation, author, user, browser - Context — shadow DOM and
::part() - The style attribute — inline styles beat style rules
- Layers —
@layerordering, and how!importantreverses it - Specificity — ID, class/attribute/pseudo-class, element/pseudo-element, then the zero-specificity selectors
- Scope proximity — fewest hops to the
@scoperoot wins - Order of appearance — last declaration in document order wins
| File | What's in it |
|---|---|
index.html |
All content — the seven steps, the credits, and the inline SVG symbol sprite (arrow + caret) |
style.css |
Everything visual, in cascade layers: reset, base, composition, blocks, utilities |
script.js |
Progressive enhancement: wraps each step's <h2> in a <button> and turns the panel below it into a real disclosure widget |
ShortStack-Regular-subset.woff2 |
Subset of the Short Stack typeface, preloaded |
The page works without JavaScript. The panels are simply visible instead of collapsible. script.js only hides them once it has built the button that can bring them back, so a failed script can never leave content unreachable.
No build step, no dependencies. It's three files plus assets, served statically.
npx serve .Opening index.html directly over file:// mostly works, but the .woff2 font and the ES module in script.js are happier over HTTP.
Deployed on Netlify.No build command, no configuration file. Pushes to main deploy automatically.
- Diagram from Bramus's CSS Day 2022 talk
- Order of precedence from Miriam Suzanne's cascade layers guide
- Hand-drawn style from Doodle CSS by Chris McCormick
- Shadow scale from Open Props
- Built by Arpit Agrawal