---

$599 ^.00 Register for this workshop → Get a single workshop, or bundle with a conference.

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.

We’ll Cover

• Writing maintainable styles with progressive enhancement
• The Cascade, why it’s there, and how to use it
• Managing conflicts with cascade layers, scope, and nesting
• Modern selectors like :is(), :where(), and :has()
• CSS Layout with grid and flexbox
• Dynamic layouts using subgrid and container queries

Workshop Outline

Understanding The Cascade

• Hints & Suggestions (an introduction), CSS is fundamentally different from other languages or design tools, built around a radical vision for contextual style and user-control. We’ll review the practical implications of that vision, and how the ‘grain’ of the language can guide us to more performant and resilient styles.
• Cascade Layers, Scope, Nesting, and new Selectors, A deep-dive into the cascade, and how we can manage (or avoid) conflicts between styles. Along the way, we’ll explore new features like nesting, cascade layers, scope, and the :has() selector.

Understanding Layouts

• Flowing & Flexing, Unlike the printed page, web content and context can be unpredictable. We’ll review normal flow and flexbox, and get a better understanding of alignment – which is now possible in block and positioned contexts!
• Defining Structure, Flexbox is a content-out sizing method, But sometimes we also need to impose structure – creating more consistent and reliable layouts. This is a full session dedicated to grid & subgrid, the multiple ‘stages of squishiness’, and container queries.

Understanding Resilience

• There are many conventions for organizing CSS, but the best systems all share underlying principles based on CSS itself. 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.

Who is this workshop for?

This workshop is intended for designers & developers with at least a basic understanding of 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.

Miriam co-wrote the CSS specifications for Container Queries, Cascade Layers, and Scope. These days she’s developing an in-depth CSS training course, editing even more specifications, and fighting for an open web that respects people over profit.

Time & Location

This full-day workshop will take place the day after SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Thursday, October 9.

Schedule for Thursday, October 9

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save EUR 100 when signing up for the conference and a workshop!