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?

• Building maintainable CSS systems with progressive enhancement.
• The entire cascade, why it exists, and what all is involved (much more than specificity!)
• Managing style conflicts with cascade layers, scope, and nesting.
• Modern selectors like :is(), :where(), and :has().
• Value resolution and validation, beyond cascading and inheritance.
• Using custom properties to build adaptive systems.
• The advantages of logical vs physical dimensions.
• The layout flow with intrinsic and extrinsic sizing.
• Size comparison functions like min(), max(), and clamp().
• When to use flexbox vs grid for layout and alignment.
• Fast and dynamic layouts using subgrid and container queries.

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:

• Monday, February 26, 09:00 – 11:30 AM PDT
• Tuesday, February 27, 09:00 – 11:30 AM PDT
• Monday, March 4, 09:00 – 11:30 AM PDT
• Tuesday, March 5, 09:00 – 11:30 AM PDT
• Tuesday, March 12, 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 | First, Do No Harm
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 | Cascading & Inheritance
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.

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!

Day 2 — Dynamic Systems, Custom Properties & Value Resolution

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Custom Properties Reveal the Matrix
CSS custom properties (aka “variables”) expose the internals of CSS value resolution and error recovery. What does it even mean for properties to become ‘invalid at computed value time’? And how can we use these CSS internals to our advantage, developing more robust and dynamic style systems?

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | CSS Variables in Practice
Practical use-cases, and interactive exercises related to CSS variables and functions…

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!

Day 3 — Intrinsic Layouts, Distributing Space

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Flowing & Flexing
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 normal flow, intrinsic and extrinsic sizing, logical properties, box sizing & alignment, and the flexible box model.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | Flex & Alignment 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’s on the day’s material. Networking!

Day 4 — Intrinsic Layouts, Defining Structure

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Defining Structure
Sometimes we also need to impose external structure to create consistent and reliable layouts, even with unpredictable content. This is a full session dedicated to Grids & Sub-grids, the multiple ‘stages of squishiness’, and container queries.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | Grids & Containers 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’s 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 | Cascade Aligned Programming
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’s on the day’s material. Networking!