Building Pixel-Perfect UI Components Using CSS Variables
AI Generated Video Summary
1. Introduction to CSS and MUI
I love CSS. That's it. That's the take. Specifically excited about CSS variables and their possibilities for UI developers. MUI leverages CSS variables for a delightful developer experience. CSS's role is expanding, opening up new possibilities. MUI's history and understanding of developer needs.
All right, hello everybody. Party people in the house. Wow. That's a lot of faces out there. All right.
I wasn't really sure how to start this talk. I was talking to a friend of mine who said, you should share your spiciest take. So in the next slide, I'm going to share my most controversial opinion in the realm of web dev. This is going to ruffle a lot of feathers in the crowd here today, but I really feel it needs to be said. You ready? Here goes. I love CSS. That's it. That's the take. I told you it's spicy, but I'm not here to make friends. I'm here to speak the truth.
But before we explore some of those possibilities, I need to share a little back story here. So MUI as a company began with material UI, which is the React implementation of Google's material design. We do a lot more than just material design these days. But material UI remains one of the most popular open source libraries on GitHub and has a history stretching all the way back to the early days of React itself. Over the course of those nine years or so, we've learned a lot about what developers want and need out of a component library. More than anything else, we've learned a lot about what developers hate. Here's an example of the kind of thing that I see on Twitter from time to time. I get it.
2. CSS Variables and Joy UI
It can be frustrating when making small adjustments to a component requires multiple changes. Introducing Joy UI, a sister library to Material UI, with a focus on developer experience. Joy UI leverages CSS variables, allowing for a single source of truth and named variables for consistency and future-proofing. CSS variables have applications beyond branding, enabling dynamic values and mathematical calculations. Joy UI uses CSS variables to create components that adapt to their parents and children. Let's compare Material UI and Joy UI with a switch component.
The king of the haters here, he's got a point. He's not wrong. It can be super frustrating when you're trying to make a teeny tiny, two-pixel adjustment to one little component. And then you realize, oh, suddenly I have to make 10 other adjustments. It's frustrating. I get it. And that's just one of the reasons why we are building Joy UI, which is a brand new sister library to Material UI that implements our own in-house design system along with some bleeding edge innovations in developer experience.
And this is most evident, I think, in the way we've constructed Joy UI to handle CSS variables. So what even is a CSS variable? According to MDN, CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. It's easy enough to understand in the context of branding colors, right? You've got a set of colors that are going to be reused throughout a design. And if you need to change one, it's so much simpler if you have one singular source of truth so you're not stuck finding and replacing hundreds of instances of the wrong hex code. Having that one source of truth is so powerful. And one of things that's really cool is you can actually name your variables, right? It helps a lot to maintain consistency across your design system and to help future proof your code, right? So instead of trying to figure out why this piece of text is sized at 1.75 rem, you can see that it has this dynamic value that's set to header to text, which gives you a lot more information about why that style has been applied.
And as you dive deeper down the rabbit hole, what you realize is that CSS variables have some really cool applications with our design systems that extend far beyond mere branding. So here's an example of what's going under the hood of the JoyUI component, the input component, that I shared a few slides back. It's weird, right? It's kind of hard to get used to at first. I mean, what is even going on here? We've got CSS variables that are referencing other variables, and they're doing mathematical calculations based on those variables. And it's all happening in CSS, right? As Josh Como points out, we're just not used to this concept, this mental model of defining CSS properties that have dynamic values. And things get even weirder when you start doing math with your variables and referencing variables inside of variables. Indeed, in the case of JoyUI, we're using CSS variables to create components that can automatically adapt their styles to match those of their parents and children, since they all reference that one singular source of truth for their magic numbers. So OK, that sounds cool, but what difference does it actually make, right? Let's consider a switch component and observe the differences in developer experience between Material UI and JoyUI. So here's some examples of switches.
These are all Material UI switches. Switch, obviously, simple on and off toggle, it's composed of a track and a thumb. So the user clicks the thumb to slide it across the track and make their selection. It's pretty simple on the surface, but it can get quite annoying when you need to make pixel perfect adjustments to the Material UI component. For instance, if we need to change the width of the track here, well, then that throws the thumb completely out of whack because it doesn't know the length of the track. And if I try to change the size of the thumb, well that messes up its path as well. And don't even get me started on border radii. If I need to adjust the rounded corners, it's not as though I can simply pass the same values to both pieces.
3. CSS Variables and JoyUI
No, of course not. I have to do math to calculate the precise curvature. And I don't know about you, but I did not sign up for this line of work to do math. No thank you.
So by contrast, let's take a look at JoyUI's switch. Now, watch what happens when I make those same adjustments that we talked about from the Material UI switch. You notice how it just works, right? And that's all thanks to the magic of CSS variables.
It's pretty cool, right? I think it helps foster the kind of developer experience that sparks joy. And that's why we call it JoyUI. So this has just been a pretty small sample of what we're up to with JoyUI. But I hope it's gotten you excited about the possibilities for CSS variables when implementing custom design systems. And I want to leave you with this question, which is this. What else is possible with CSS variables? I think we're going to continue to see a lot of new innovations in this realm. And I cannot wait to see what you all create.
If you thought those component demos were cool, like I said, we've got playgrounds all through our documentation. This QR code, if you want to scan it, will take you directly to the switch CSS variable playground that I just shared. So I hope you'll have some fun playing around with that. And if you like JoyUI, give it a try. We're inches away from a stable release. And we would love to get your feedback on how we can improve and what components we should build next. So if you get a chance, please send me an email. I'm Sam Sycamore. My email is SamMui.com. You can find me on Twitter, BlueSky, et cetera. I'm at the MUI booth for the rest of the conference. So come by, say hi. That's it. Thanks a lot, everybody. Thank you. Thanks a lot.