Modern CSS Architecture

Contact us to schedule a workshop with your company:

• 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

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.

Bring this workshop to your company »

Miriam is a developer, teacher, and pioneer of modern CSS – an Invited Expert on the W3C CSS Working Group and core contributor to the Sass language. She created Susy for responsive layouts back in 2009, and recently co-wrote the CSS specifications for Container Queries, Cascade Layers, and Scope.

In addition to presenting talks & workshops at conferences around the world, Miriam is a former staff writer for CSS-Tricks, co-founder of the Mozilla Developer Channel, and co-author of SitePoint’s Jump Start Sass. She’s also a cross-media artist with extensive experience in theatre, writing, music, and visual art.

1. 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.

2. 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.

3. 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.

Consider bringing us in to talk with your team directly: