Dynamic CSS with Custom Properties (aka CSS Variables) Introduction
Transcript from the "Introduction" Lesson
>> 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: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: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.