Building Pixel-Perfect UI Components Using CSS Variables

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.

Specifically the thing that I'm really excited about lately is CSS variables and all the possibilities that they open up for us as UI developers. At MUI, we are leveraging the power of CSS variables to deliver a developer experience that sparks joy and delight when customizing React's components. With CSS variables, we can essentially create components that are aware of their surroundings and automatically adapt to match the styles and structures of their parents and children. And best of all, this is all happening in CSS, not JavaScript. Don't send JavaScript to do CSS's job. And the role of CSS is quickly expanding. So for us developers, it opens up so many new possibilities.

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.

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.

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.

So not only do I not have to write any JavaScript to pull this off, but I don't even have to do the math to get the border radii right. It just knows what to do. And these values that you see inside the SX prop, those are the CSS variables that you need to make those pixel perfect adjustments. So you can literally just copy and paste this code directly onto your component after you've customized it. And we've got CSS variable playgrounds like this all throughout the JoyUI documentation to make it as simple as possible.

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.