Cascading Style Systems: Resilient & Maintainable CSS
- Your instructor
- Miriam Suzanne
- Tickets
- Get a ticket ↓
-
Workshop includes:
- 🔖 Examples to take away
- 🗣 Interactive sessions
- 📺 Workshop recordings
- 🎤 Dedicated Q&A time
- 🏅 Smashing Certificate
Workshop, 5×2h + Q&A • Tue, Wed, Thu, June 2–10 2026
09:00 – 11:30 AM PT • 18:00 – 20:30 CEST • Check your time zone ⏰
New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the ‘:has()’ selector, subgrid, nesting, and so much more.
It’s an exciting time, but the list can also feel overwhelming. Do I really need grids if I already know flexbox? What problem do layers actually solve? Should I rewrite my styles with each feature release, or stick with the tools that I know? It’s a good time to step back and understand how these tools fit together in a declarative system — a resilient cascade of styles.
Here’s What You Should Be Expecting:
-
Interactive live sessions
5 × 2.5h live sessions
-
Practical insights
From CSS Layout to new CSS features
-
Hands-on exercises
With reviews by your teacher
-
Lifetime access
To all video recordings and examples
-
Dedicated Q&A time
To ask all your questions
-
Smashing Certificate
A well-deserved reward for your work
$450.00
With all video recordings &
slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.
If you ever feel lost in the CSS weeds, wrestling with the cascade, or you just want to improve your workflow with modern, efficient, and maintainable stylesheets, then this workshop is for you! We’ll approach the language as a cohesive system, learn new features along the way, and then put it all in practice with a resilient approach to CSS architecture.
Join Miriam for a deep dive into what makes the language work, and how we can harness its power to develop resilient and delightful experiences that hold up across browsers, languages, and device interfaces.
What Will Attendees Learn In This Workshop?
- The CSS mindset for avoiding issues, and debugging with confidence.
- Naming and organizing conventions for resilient & maintainable CSS.
- Managing style conflicts with cascade layers, scope, and nesting.
- Modern selectors like :is(), :where(), and :has().
- The advantages of logical vs physical dimensions.
- Value resolution and validation, beyond cascading and inheritance.
- The layout flow with intrinsic and extrinsic sizing.
- Flexbox and grid in-depth, for advanced layouts.
- Fast and dynamic layouts using subgrid and container queries.
$450.00
With all video recordings &
slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.
Who Is This For?
This workshop is intended for designers & developers with at least a basic understanding in HTML and CSS. You don’t need to be an expert to keep up, but even the experts are likely to learn something new.
What hardware/software do you need?
Bring your own laptop, your favorite text editor, and any practical CSS issues you’re facing.
About Miriam Suzanne
Miriam is an artist, engineer, and open-web advocate. She’s a co-founder of OddBird, Invited Expert on the W3C CSS Working Group, and Sass core contributor who enjoys pushing the boundaries of web technology.
These days she’s working on specifications for Container Queries, Scope, and Cascade Layers in CSS; extending the Sass color module to support wide-gamut colors; and learning to crochet socks.
Time & Schedule
This workshop is split over five days.
You can always re-watch the sessions at a more convenient time and follow the workshop at your own pace.
The workshop sessions will run on the following days:
- Tuesday, June 2, 09:00 – 11:30 AM PDT
- Wednesday, June 3, 09:00 – 11:30 AM PDT
- Thursday, June 4, 09:00 – 11:30 AM PDT
- Tuesday, June 9, 09:00 – 11:30 AM PDT
- Wednesday, June 10, 09:00 – 11:30 AM PDT
Day 1 — Resilient Styles, a Declarative Cascade
8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.
9:00 AM – 9:45 AM | Hints & Suggestions
CSS is fundamentally different from other languages or design tools, built around a radical vision for contextual style and user-control. We’ll dig into the practical implications of that vision, and how the ‘grain’ of the language can guide us to more performant and resilient styles.
9:45 AM – 10:00 AM
Break
10:00 AM – 10:45 AM | The Program Runs Without Us
A deep-dive into the algorithms that take us from simple property/value declarations to a fully-styled web application. The browser has to make sure that every property on every element has a single value, with or without our input. The result is a constraint-based design language, with strong typing, and properties that adapt to context.
10:45 AM – 11:00 AM
Break
11:00 AM – 11:30 AM
Q&A with Mia on the day’s material. Networking!
Day 2 — Working with The Cascade
8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.
9:00 AM – 9:45 AM | A Balance of Concerns
The Cascade starts with a goal to balance the power across multiple stylesheets and multiple stakeholders. We’re not alone in the system, and we have to be prepared for collaboration. We’ll dive into the process for resolving conflicts, and where our styles fit into the broader picture.
9:45 AM – 10:00 AM
Break
10:00 AM – 10:45 AM | Meaningful Selectors & Priorities
New cascade features like nesting, scope, and layers give us full and flexible control to target the elements we want, in a way that makes our priorities clear. We’ll cover all those features, along with new selectors like :has(). These tools give us the keys to writing and maintaining reliable conventions across our CSS.
10:45 AM – 11:00 AM
Break
11:00 AM – 11:30 AM
Q&A with Mia on the day’s material. Networking!
Day 3 — Intrinsic Layouts, Defining Structure
8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.
9:00 AM – 9:45 AM | Grids & Alignment
CSS grids are one of the most powerful tools in CSS for creating consistent and reliable layouts, even with unpredictable content. This is a full session dedicated to Grids, sub-grids, alignment, and the multiple ‘stages of squishiness’.
9:45 AM – 10:00 AM
Break
10:00 AM – 10:45 AM | Grids in Practice
Practical use-cases, and interactive exercises related to defining layouts…
10:45 AM – 11:00 AM
Break
11:00 AM – 11:30 AM
Q&A with Mia on the day’s material. Networking!
Day 4 — Intrinsic Layouts, Distributing Space
8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.
9:00 AM – 9:45 AM | Flexing & Responding
Unlike the printed page, web content and context can be unpredictable. CSS provides tools to manage that uncertainty, aligning & distributing objects on the page. We’ll talk about intrinsic and extrinsic sizing, the flexible box model, and responding to container or media queries.
9:45 AM – 10:00 AM
Break
10:00 AM – 10:45 AM | Flex & Containment in Practice
Practical use-cases, and interactive exercises related to distributing space…
10:45 AM – 11:00 AM
Break
11:00 AM – 11:30 AM
Q&A with Mia on the day’s material. Networking!
Day 5 — Resilient Styles, Organizing Conventions
8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.
9:00 AM – 9:45 AM | Poetic CSS
There are many conventions for organizing CSS, but the best systems all share underlying principles based on CSS itself. What would it mean to use The Cascade as our guide for writing maintainable CSS?
9:45 AM – 10:00 AM
Break
10:00 AM – 10:45 AM | Modern AND Resilient
CSS is designed to adapt to context – failing silently, and enhancing progressively. We have tools to manage that context and support everyone, without giving up on the latest features. The details may vary from project to project, but we’ll look at practical strategies for building an expressive and robust CSS system that works for you.
10:45 AM – 11:00 AM
Break
11:00 AM – 11:30 AM
Q&A with Mia on the day’s material. Networking!
$450.00
With all video recordings &
slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.