Styling Components Exercise

[00:00:00]
>> Your challenge for this section is to take a look at styling view. I've intentionally left a lot of the styling in there very generic. In fact, there's a lot of duplication. And so you can try actually seeing if you can refactor it in a way that makes more sense to you.

[00:00:16]
Maybe you wanna do it in a global file, who knows? And then you can play around with V-bind. All right, hopefully people had a chance to play around with some styles like I said, honestly CSS has its own skill set, there are plenty of great workshops here on front of masters so be sure to check those out if you wanna learn more about CSS architecture.

[00:00:36]
But I hope that was useful in terms of like a way to sort of learn what kind of techniques are available to you out of the gate when it comes to using view so that you can use that to augment or best practices with CSS cuz to be very clear.

[00:00:49]
Again, as someone who loves CSS, I'm not advocating for you to kind of work around the cascade, the cascade is extremely powerful. But like a lot of things, you got to know when to use it in the right scenarios. And sometimes when it comes to certain components, it makes sense to just keep it scoped to ignore the cascade.

[00:01:03]
And so know that view provides you those options. And also, as we saw, with the V-bind as well when it comes to customization and being able to easily connect your JavaScript with your CSS like View tries to do its best to make that as easy as possible for you when it comes to using compiler based optimizations.

[00:01:22]
So I'll just go ahead and just once again, let's demo some of that inside of cest-la-vue, so that you can have that as a solution branch. And then we'll go from there. So switching on over CDs cest-la-vue. Great, perfect. All right, so first thing first, when I think of cest-la-vue as we can see here, the use of card actually is something that sticks out to me as something that we honestly are not gonna share these styles at this moment.

[00:01:54]
And so when I look at this honestly, I do think this is probably a good case for just having the wrapper or these particular styles be scoped to this particular component. So we can go ahead and scope it like this. And then however though, if you're thinking about it and you're like, well, there are a lot of other cards out there, so what if I wanna be really specific about this card.

[00:02:15]
Then on second thought, let's just make this a CSS module, since again, the styles here are fairly innocuous. Not a lot of reusability at the moment, so we can just do style, and then because it's the dash though, this is where unfortunately the style of syntax is a little bit on the uglier side comparatively.

[00:02:32]
We can see now that it still works because we look at here, we can see there's our user-card, that's actually being rendered out as anticipated. Okay, what about other opportunities for styled refactoring? Well, if we take a look at the homepage, we have a bunch of stuff here that's actually fairly generic.

[00:02:50]
We have stuff on the login page that's being refactored. So we could do really is we can just actually delete the stuff on the login page. And then if we refresh and take a look home login, everything still looks good. So that refactor was pretty easy. And then finally, let's find an opportunity for some scope styles while we're looking at the user page, actually, it looks like we're using a lot of stuff here as well.

[00:03:13]
So let's go ahead and just wipe this out to finish the refactor and we take a look at homepage, we do have that button green right here. So okay, that's good. In this case, to be honest, I'm not sure I'd wanna scope the styles at this point, because we're inside of homepage.

[00:03:28]
And homepage, we know is being shared across multiple files. So at this point, what I would probably do is I said, you know what? Homepage styles are not just being shared like for its own, it's being shared across the entire app. So let's actually just drop that inside of here.

[00:03:43]
So at the bare minimum, it feels a little bit more proper in terms of cascade app.viewcontrols, these things are being shared everywhere, so boom, it's now being shared. And there are certainly opportunities here to refactor things, for example, we're seeing the navigation here. So you can imagine as this application grows, you can totally see an opportunity for us to actually refactor our header component into its own file, which then that might be a good use case for scope, for example.

[00:04:07]
Anyhow, just wanted to talk through some high level refactoring and that's how I might approach it.