Cascading Styles
A deep-dive into the algorithms that take us from simple property/value declarations to a fully-styled web application. Along the way, we’ll explore new features like nesting, cascade layers, scope, and the :has() selector.
CodePen Demos
- Resilient HTML
- The Cascade (as a funnel)
- No !important keyframes
- Important Shadow Context
- Quick Layers Live Demo
- Excluding v Overriding
- Una Kravets Space Facts CQ + :has() Demo
- Has light/dark selection
- Scope proximity demo
- Visualizing scope
- Scope boundary demo
Resources
- Cascading HTML Style Sheets – a proposal, by Håkon Wium Lie
- List of CSS Properties
- Cascading & Inheritance Level 5
- Cascading & Inheritance, Level 6
- Cascade Layers polyfill
- Selectors specification
- Disclosure Widgets, by Adrian Roselli
- Can I Use: Cascade Layers
- Example layer orders
- Can I Use: CSS Nesting
- Can I Use: :has()
- Can I Use: the @scope rule
- On branded CSS conventions by Chris Coyier
- CSS Systems by Natalie Downe
- Object Oriented CSS by Nicole Sullivan
- CUBE CSS by Andy Bell
- Style with Stateful, Semantic Selectors by Ben Myers
- Axiomatic CSS and
LobotomizedOwls by Heydon Pickering - Semantic CSS With Intelligent Selectors by Heydon Pickering
- Selectors specification
- User Agent Table Styles
- Inverted Triangle CSS by Harry Roberts
- Example layer orders on Mastodon
- About HTML semantics and front-end architecture by Nicolas Gallagher
- A Dao of Web Design by John Allsopp
- Be The Browser’s Mentor, Not Its Micromanager by Andy Bell
- Resilient, Declarative, Contextual by Keith J. Grant
- CSS Classes considered harmful by Keith Cirkel
- CSS Guidelines by Harry Roberts
- The Way We Talk About CSS by Rachel Andrew
- Block Element Modifier