v-bind in CSS

[00:00:00]
>> Okay, but one other thing I wanna tell you about styling, which most people don't know about when it comes to Vue 3 is that this is great. We have the ability to global styles, we have scoped styles, we have CSS modules. For me, one of the things, when it comes to extending on the functionality of the web, is how we can bring the technology together in a better way.

[00:00:22]
And so JavaScript is really good at interactivity, managing state, and dynamic pieces of information. CSS is very good at what it does, styling. And so, what if you could find a way to actually merge the two together in a way that allows for just crazy possibility? To show you what I mean, let's go ahead, and I'm just gonna save this right now.

[00:00:42]
And on the App.vue, what if we wanted the ability for the user to choose what the background color is? Typically the approach for that is you probably would come to your designers and you would say, okay, these are the seven classes we'll support. And so we'll try our best to just support it this way, and so you're limited.

[00:00:59]
But there are plenty of cases where you might actually want to give the user infinite configuration. But the reason why we can't do that is because, frankly, managing the CSS for that can be quite difficult. So let's say, for instance, we have that property. So I'm gonna import a ref from vue, and I'm gonna call it colorPreference.

[00:01:18]
There'll be a ref, it'll be an empty, actully we'll just say, black, for now, okay? And so what we'll do here is, what you ideally wanna do is you'd like your CSS to be able to read from your JavaScript. That'll be a perfect world, wouldn't it. Right now what you probably have to do is some convoluted on load the document element, then insert your own style tag and manipulate the inline styles of the HTML.

[00:01:42]
There's a lot of work that goes into that. Well, what if I said, instead, that what we could do is, let's say on the app itself. This time we're gonna do a background color. But this time, I'm going to actually, let's see, let's try to just do this.

[00:02:00]
Will colorPreference work? Now, nothing's happening. Well, let's make sure it's working first. So let's go ahead and do this. Let's actually render out the colorPreference. So colorPreference, now where is it? It's all the way down here. Let's bump it up so it's easier to read. Okay, great, it is showing up.

[00:02:20]
Let's make sure it actually can get changed, that it's reactive. Let's do an import. If you didn't know, there's a type called color on your inputs that's actually built into HTML. And we can just v-model this to our colorPreference. So let's see if this works. Let's see, let's go this, okay, great, so now we have this infinite color loop.

[00:02:38]
Well, Vue 3 was like, you know what? I think we can make this happen. What if we just wrapped this in v-bind? And so, we get, shoot, we need to, maybe app is too far of a context. There we go, okay? That context was too high. All right, it's fine.

[00:03:02]
I'll just do the, let me do this. Let me wrap this real quick. Okay, so I'll explain why that's not working real quick. It actually does make sense. But for the sake of showing this, there we go. Okay, What we can see here now is you have this infinite loop of JavaScript updating the CSS.

[00:03:23]
Now if you're skeptical, you're like, this looks like black magic, what's happening here? All right, let me show you. Let me show you. I promise you, when we think about things, we try to think of things in terms of extending the web. Look at actually what's happening here.

[00:03:39]
What JavaScript does well is it says, okay, I'm gonna create a custom variable. But we're gonna use CSS variables cuz, guess what? That is browser technology that is actively supported. And why would we try to reinvent the wheel? And so all JavaScript's doing is it's actually just tracking this variable, and just making sure to update that value, but the rest of it is CSS.

[00:04:00]
So you get the power of CSS and cascades and everything in its native form. But you also get the power of getting reactive data that can impact those things. So you can imagine, the number of times I've been on Azure I wanted to customize the font size or the padding, those were hard to do.

[00:04:15]
Because to create a class for every single one of those scenarios or to manage that at one point was nigh impossible. But with things like v-bind on your styles now, so many possibilities now exists with this. And so if you're wondering, though, why did I have a little bit of trouble with the HTML, I think, and the app?

[00:04:34]
Is because, I think, Vue, once it takes over the div is unable to go outside of it. So that's what it is. It's not in control, Vue is not in control of that area. So if you're gonna do this, obviously make sure that you're within the context of your app, otherwise the CSS won't apply.

[00:04:49]
But otherwise at this point, you can imagine just infinite user preference configuration that's possible with this.