Global vs. Scoped Styles

[00:00:00]
>> We're gonna take a bit of a mental break. [LAUGH] Because we've been doing a lot of JavaScript, doing a lot of the heavy lifting stuff. Let's talk about styling your app, because let's face it as web developers. Styling your app is a real thing, managing CSS, a lot of us might not love it.

[00:00:14]
I happen to love CSS, but I wanna show you what's possible with Vue so that those ideas can get flow in when it comes to time to style the app. So I'm gonna go ahead and go back to the playground, run dev, and we're good. Okay, let's take a look at our base counter, since this is what we have showing up on the screen right now.

[00:00:36]
Okay, so we talked a lot about templates, we talked a lot about script. Let's talk about style. So actually, I take that back. I'm going back to playground because this is a simpler file to read right now. New base counter has a lot of stuff going on. So the style block here, what exactly is going on here?

[00:00:53]
Well, let's start by doing something pretty simple. Let's go ahead and let's tag the entire page, and just give it a background color of say, let's do the background color, papayawhip. And I can't spell. Alright, that should do it. Okay, this is great. Now, what's going on here actually?

[00:01:16]
What's going on is that when you just have a standard style tag, what Vue is doing is it's injecting the style basically across the entire app. So in other words, you see these buttons right here? If I go ahead and did button, border, red, or let's see 10px solid red, like that, you'll see that it impacts everything.

[00:01:37]
And you might be thinking, is it because it's app.vue? No, because the styles are being injected globally. So, any component that comes on this page is gonna get impacted by this. And so, this is a double-edged sword like anything else. There are times that you want CSS to cascade and do its thing.

[00:01:58]
And a lot of times, actually though, you don't want it to do its thing. You want your style to be encapsulated to the components you're using. So, for instance, if we're looking at the user card, in this case, you might want the buttons here to have a very specific style.

[00:02:14]
In this case, let's say we wanted the buttons to be border 10 px solid green. You'll notice, that if we just use a standard tile tag as it happens to be, it'll happen to override. And while you might try to think of a way to reason why this is happening, trust me, when you have hundreds and thousands of components injecting global styles, you do not want to debug that.

[00:02:38]
So, that brings us to, so this is the first style of styling your app, which is you can just drop CSS, it will render everywhere. The one that's the most popular is something called scope styles. And if you've never heard of scope styles before, they're basically a way to do exactly as the naming convention sounds, to scope your styles to a specific area.

[00:03:00]
And so what is actually happening underneath the hood, right? Cuz I talked a lot about Vue building on what already exists in the ecosystem. Well, scope CSS, what it's actually doing, if you take a look here, is it's actually taking a look at the elements that are relevant to this particular component.

[00:03:18]
And it's appending a unique data attribute. So you see here, this data-v-b600, that is what's basically being appended to the HTML. And then what's cool about this, is if you look at the, not the console, where's my CSS? It's down here, I hit it. Look at this style, it's button using the attribute selector to then go ahead and apply those styles specifically within that context.

[00:03:46]
And that actually works pretty well, assuming that the rest of your global CSS isn't written in a highly specific way. This actually works really great, and a lot of people have a lot of success using scope styles. But scope styles is imperfect, because if we went ahead and, I don't know, did something a little bit more specific like this, same thing with that.

[00:04:06]
I think that didn't quite do it. It's fine. I'll just do this. I'll just go the lazy route. If someone somewhere in your enterprise app decided to bang important, the button, scope styles are not gonna save you by any means. You're still gonna have to be stuck with the cascade effect.

[00:04:21]
And there's something to be said about being disciplined about writing your CSS. So that could be something your team does. But what if there was a better way?