CSS Modules

[00:00:00]
>> So we talked about scoped, what about CSS modules? You might not have heard a lot about it, but, and this is a feature that's not talked a lot about, but what you can do is you can actually go ahead and tell your module, or your CSS styles to take on the module mode.

[00:00:18]
Now, what this will do though is a little bit tricky though on the other hand, so let me show you what's happening. So, right now we'll notice that nothing's happening to the button right now because, CSS modules works really well in view or honestly I think in JavaScript scenarios when there's an actual class associated with it.

[00:00:35]
So just to switch this up to show that it's equivalent, let me start by reverting this real quick. So we use a class of button rather than just a generic button selector. And we'll show that this, on the see on the button count, or the base counter, let's make sure everything is equivalent.

[00:00:50]
So all the buttons here, one, two, three, are gonna get a class of button. So there we go, there's that red showing up as we would expect. And under user card, we got a class of button. All right, so now everything is equal, we're talking about CSS classes here now.

[00:01:05]
Okay, when we add the module here, what this is going to do is this is going to allow us to do something that might seem a little weird at first, but trust me on this one. What we're gonna do is we're going to v bind our class attribute.

[00:01:20]
And so I'm going to do the shorthand now. And rather than just bind it to button directly, because right now it'd be like, what I mean button, there's no variable called button. We're going to do $style.button. That's what we're going to do. And so what you'll notice here actually I realised I only update it in one place.

[00:01:39]
We didn't update it in all three, so one, two three, just like that. Okay? So you might first think, That looks kind of ugly, I don't like the JavaScript. But, let me show you what's actually happening underneath the hood. If you take a look here, what you'll notice is that the class has actually now been recompiled to actually have a unique hash at the end.

[00:02:03]
And this is improve, this is really powerful because what you end up getting is the ability to actually truly scope your styles to the basically that particular component. Cuz the odds of this getting overridden by something else, randomly is very, very low. And if you want it to be, even more like specific, there are actually ways to configure your compiler to actually, basically spit out a specific pattern of how you want the modules to be spit out.

[00:02:29]
So in this case for example like you'll notice it tells you that the class of button is being used. Right? So that we can at least search for a class button and then after that of course this is a randomly generated hash. At the bare minimum this is to me the minimum that, the minimum size of dx that I think I recommend when it comes to CSS modules across frameworks, is because I noticed that some CSS modules will actually just hash the entire class.

[00:02:51]
And you could argue, that's super unique. But I'd also argue that it's super hard to debug. In fact, that's like, almost near difficult impossible to debug because you're, now I have to figure out the HTML where that happens to apply. And so what I typically recommend when it comes to CSS modules is to also go ahead and prefix the component name to it.

[00:03:09]
Now granted, if your component names are super long, then there might end up being a performance issue. But that way you know exactly which component file to drop into and where the CSS classes, but this is a really great way to protect your CSS for components. Now, once again I know that not everyone is in love with this style syntax.

[00:03:25]
So what I tell people is this, remember that when you're using stuff in view you can do stuff where it makes sense. Just because you want to use CSS modules doesn't mean you have to CSS modularize your entire code base, you can just do it in the places where it makes sense.

[00:03:37]
And that way you don't feel like you have the one, do it for across the entire code base. But two, you can be selective about the techniques that you use, because, as we saw earlier scripts works really well when it's written well, but then otherwise in times you need to be very protective.

[00:03:51]
Go ahead and try out CSS modules on it. And again, this is something that's just built right into the library, so the moment you want to use it, it's there for you. We won't show you this at this point, because this will be like additional configuration, but just know that for these blocks as well, a lot of us also use pre-processors when it comes to using our styles.

[00:04:10]
And so you should know, is that you can actually add attributes on here, like Lang CSS, for example and you'll need to actually configure your builder to actually make sure it has like the sass loader. But once you do that, you can write your sass files in here, just like you normally would use all your sass syntax as you would expect.

[00:04:27]
Question?
>> Is their way to to avoid the class bind style button? Is there a way to use sass and bind to, the parent element In the component and then your sass?
>> Yeah, that's a great question. So, the question is around trying to instead of using the style to use sass to check out what the class is of the parent, and use that to generate the CSS the wrap and that's everything I've never actually done that particular approach.

[00:04:57]
I would imagine that if you were to approach it, it might be kind of hard to do, so I don't have I'll say that it sounds possible but it might be tricky to do