New CSS features are shipping at an unprecedented rate –
cascade layers, container queries, the :has() selector,
subgrid, nesting, and so much more.
It’s a good time to step back and understand
how these tools fit together in a declarative system –
a resilient cascade of styles.
Join Miriam for a deep dive
on developing resilient and delightful experiences
that hold up across browsers, languages, and device interfaces.
Loving the content and the interactivity.
My favorite part is seeing how [Miriam] arranged the topics
so that concepts smoothly flow into each other.
Looking forward to two more days!
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.
Miriam is a developer, teacher,
and pioneer of modern CSS –
an Invited Expert on the
W3CCSS 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.
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.
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.
2. Dynamic Systems: Custom Properties & Value Resolution
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?
CSS Variables in Practice
Practical use-cases,
and interactive exercises related to CSS variables and functions.
3. Intrinsic Layouts: Distributing Space
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.
Flex & Alignment in Practice
Practical use-cases,
and interactive exercises related to distributing space.
4. Intrinsic Layouts: Defining Structure
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 grid & subgrid,
the multiple ‘stages of squishiness’,
and container queries.
Grids & Containers in Practice
Practical use-cases,
and interactive exercises related to defining layouts.
5. Resilient Styles: Organizing Conventions
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 itself
as our guide for writing maintainable CSS?
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.
