Skip to main content

Dynamic CSS Masterclass

Lea Verou

Your instructor
Lea Verou
Workshop includes:
  • Working examples to take away
  • Docs with all the info you'll be learning
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:

Workshop, 4×2h + Q&A • Mon & Tue, Nov 29 – Dec 14 2021
09:00 – 11:30 AM PT (Pacific, US) • 18:00 – 20:30 CET (Europe)

Calling CSS custom properties “CSS variables” buries the lede. Sure, they can be used as simple variables, in the same way as Sass variables, but using custom properties for fonts and colors is only utilizing a tiny fraction of their power.

Used to their full extent, CSS custom properties can facilitate better collaboration and code reuse, improve maintainability, and downright enable possibilities that previously required large amounts of hard-to-maintain Javascript and violated separation of concerns. They truly are a revolution in the way we write CSS, whose potential is still largely untapped. Now that they are finally supported by every modern browser, there is no excuse not to dive in.

We will cover the many benefits of using custom properties over other approaches, the nuts and bolts of how custom properties work, caveats and ways to work around them, and numerous practical non-obvious use cases where their power truly shines.

The use cases we will practice span a wide range of modern CSS, from Grid Layout and Flexbox to compositing and blending, so you will also get a crash course of modern CSS along the way.

$400 .00Register for this workshop →4 × 2h live sessions + Q&A. Nov 29 – Dec 14.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.

What Will You Learn In This Workshop?

  • How do CSS custom properties work? What can they be used for and what can’t they be used for? How do they differ from Sass/Less variables? Can they be combined with them?
  • What is browser support like? What can I do if I still need to support IE11?
  • How can custom properties improve code maintainability?
  • How do custom properties facilitate better collaboration between teams of different skill sets?
  • Reactive CSS with custom properties and JS, for true separation of behavior and styling
  • Invalid at computed value time: How do custom properties change the cascade?
  • Updating custom properties dynamically: how and why?
  • Emulating mixins and custom shorthands with custom properties
  • Custom properties for easier responsive design with less code
  • Encapsulation: how to use custom properties to create styling hooks?
  • Custom properties and web components: a match made in heaven
  • How to use Houdini APIs to animate custom properties and control evaluation
  • Debugging custom properties
  • Avoiding gotchas

Who Is This For?

This is a full workshop, delivered in four 2-hour long sessions with lots of time for Q&A, and hands-on exercises.

This workshop is for everyone who writes CSS, or JS that interacts with CSS. This includes front-end designers, front-end and full stack developers. It will be especially useful for anyone who writes code that is used by other developers. You will need a solid understanding of CSS, and for parts of the workshop, a basic understanding of JS (mainly events and basic DOM). You do not need to already be familiar with custom properties, though if you are extensively familiar, you will gain a lot from the workshop, as this is an advanced course and not an introduction.

Even if you don’t leave loving CSS, you will leave being able to do the parts of your job that involve CSS in a faster and better way.

$400 .00Register for this workshop →4 × 2h live sessions + Q&A. Nov 29 – Dec 14.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.

What Do You Need To Bring?

You will need a laptop, with a modern browser and a (free tier) CodePen account.

About Lea Verou

Lea is passionate about improving the Web, a goal that she has been working towards for over a decade, from many different angles. She is heavily involved in web standards, as an elected W3C Technical Architecture Group (TAG) member, as a longtime CSS Working Group Invited Expert, and in the past as W3C staff. She currently works at MIT, doing research at the intersection of HCI and programming languages. She is a well known speaker and author, having written several articles, book chapters, and the bestselling advanced CSS book CSS Secrets.

Lea has also started several open source projects and web applications, such as Prism, Mavo, and Awesomplete. Some of her open source work is used on millions of websites. She tweets @leaverou and blogs at lea.verou.me. She holds a MSc in Computer Science from MIT. Despite her technical pursuits, Lea is one of the few misfits who love code and design equally.

Time & Schedule

This workshop is split over four days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

  • Mon, November 29, 09:00 – 11:30 AM PT
  • Tue, November 30, 09:00 – 11:30 AM PT

One week break

  • Mon, December 13, 09:00 – 11:30 AM PT
  • Tue, December 14, 09:00 – 11:30 AM PT

Day 1: Fundamentals of CSS Custom Properties

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM
Fundamentals of CSS custom properties: differences from preprocessor variables, scope, inheritance, web components and theming, custom property registration, Fallbacks, Default values, Invalid values. Invalid At Computed Value Time (IAVCT) vs Invalid at parse time.

11:00 AM – 11:30 AM
Q&A with Lea on the day’s material. Chat with each other.

Day 2: Use cases & strategies

8:45 AM PT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
Applications in color manipulation and Responsive Design, Transitions & Animations.

11:00 AM – 11:30 AM
Q&A with Lea on the day’s material. Chat with each other.

Day 3: Making the most of CSS custom properties

8:45 AM PT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
Syntax tokens, data types and conversions, conditionals, range mapping.

11:00 AM – 11:30 AM
Q&A with Lea on the day’s material. Chat with each other.

Day 4: Custom properties + JS

8:45 AM PT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
How combining custom properties with JS is a revolution for separation of concerns, collaboration, and code reuse.

11:00 AM – 11:30 AM
Q&A with Lea on the day’s material. Chat with each other.

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:

x