Introduction

[00:00:01]
>> Hello and welcome to this course. I was delighted to be given the opportunity to create this course for frontend masters. Because I always felt that custom properties have so much untapped potential. So before we start, who's Lea? So hi, I'm Lea Verou. My Twitter handle is right there.

[00:00:18]
Feel free to ping me with any questions. I'm a CSS Working Group invited expert for about a decade. I co-edit several CSS specifications and have provided input for a lot more. So I have been actually involved in a lot of the things we're going to discuss today. Awesome this year, I'm also an elected W3C TAG member.

[00:00:39]
The W3C TAG is a special working group within W3C, which reviews all other proposals to add new, APIs to the web platform. My day job is a human-computer interaction researcher at MIT human-computer interaction just the fancy academic term for usability. My research is centered around usability in programming languages.

[00:01:01]
And I've started a bunch of open source projects and have reviewed 1000s of pull requests at this point so that also colors my perspective about what kind of code is maintainable. So what will you need for this course? A solid understanding of modern CSS is definitely an important prerequisite.

[00:01:20]
I'm not going to explain things like grid and Flexbox. I kind of expect you to be familiar. And I expect you to have significant experience solving problems with CSS so that you can recognize them. When I describe these problems and better solutions to them, a little bit of Sass would be useful because we're going to use it in a few parts of the workshop.

[00:01:42]
But if you don't have any experience with Sass or any other pre processors, don't worry about it it's a tiny part. And for the last section, you will need a little bit of experience writing vanilla JS without any frameworks mainly events and Dom. But I'm going to go through them so don't worry if you don't have all that much experience with JavaScript.

[00:02:04]
So what are we going to learn. We are going to learn how to use custom properties to make our CSS more maintainable, more extensible, more robust. We are going to learn how to create styling hooks so that other people can style our components and allow us to still change everything about them internally.

[00:02:25]
We will learn how to use custom properties to create transitions and animations that were not visible without JavaScript or even those that were visible, but in a much easier way. And lastly but perhaps most importantly, how to finally, cleanly separate style and behavior in a way that was never possible before.

[00:02:45]
And along the way, we're gonna mention a lot of caveats, gotchas workarounds because this is a CSS course after all. So when will you need? All you will need to follow along in Is basically a recent Chrome and the functioning keyboard. That's about it. You should open the slide deck.

[00:03:06]
The link is right there and you just press the arrow key to advance through the slides.