Layers, Sublayers, & Scope

[00:00:00]
>> Kevin Powell: On this topic of organization and everything, I do want to talk about layers, sub layers and scope. So the first thing we talked about this very early on, when I started with the layers. We can define all of the layers at the beginning, if we want to, and then just use them below.

[00:00:13]
And that first declaration is what's actually setting the order of them for how important they are. The first ones, the least important, the one at the end is the most important, so it has the highest precedence. So that's one way we can organize our layers, I've mentioned sublayers a bunch of times, but I haven't really been using them, just because I feel like in this situation, I didn't really need them.

[00:00:35]
And I feel like it makes you ask more questions sometimes [LAUGH] Along the way. And you spend more time trying to get organized with everything, rather than just throwing it in there and making it work. So you do wanna balance that out, but as a project grows, you might think about refactoring a little bit to introduce sublayers.

[00:00:52]
Sublayers work exactly the same way as layers, but within like the scope of the parent layer that they're inside of. So you could have your root here and your general styling just to be more organized, you won't run into any conflicts there, so it's really just about organization.

[00:01:09]
The other thing though that you don't want to do is use layers as a scoping mechanism. And I'm saying that because this is one thing that I see people doing sometimes, is. They'll do components, and then they have their cards, and then they have their buttons. So they're trying to make a layer based on exactly what that class is that's inside of it.

[00:01:28]
And it feels like that's sort of what layers should do, alot of people went to this early on, but there's drawbacks to doing this because of the way that the specificity works. Within layers, because layers are really about organizing specificity. They're not about organizing, so we have, yeah, it's just easier to overwrite.

[00:01:48]
We're less worried about how specific a selector is, because I know my utility class is always the highest precedent and I can overwrite it. But because they have that impact on specificity, the example is right here, if I did my cards. And I had this really high level selector here to put the background color of a button in a card to be yellow.

[00:02:06]
And then I did another layer down here where I'm saying the background would be purple. The background would be purple, even though this is a lower, it looks lower specificity, but this sub layer is higher precedence because it comes after my cards here. So all of a sudden, your generic button comes into play, and then the order of things matters again, and it becomes a lot bigger of a mess, and it just gets really complicated.

[00:02:29]
So just to highlight that here quickly, we can see it in action, where it lets us come on my, we'll just do this in the base layer for fun, you don't have to replicate this is just going to highlight the problems that you can run into with sub layers.

[00:02:47]
So say, I came here and I said, this is my layer of typography, or heading. Yeah, we'll do type, typography, and then over here I do an at layer of, we'll do a utilities one here as well, type, how old call it helpers, or something like that. So my typography one, I might come in with a specific one of section title.

[00:03:13]
And then I do the section title is going to be a background of blue. I don't know why we would do that, but just so we can see it on the page. And then maybe even this is like my only if it's an H2, again, we're boosting the specificity of it.

[00:03:29]
And then you have a helper class here that's just like a very generic selector, h1, h2, h3. For some reason, as a generic selector, you do a background of green. It's a very terrible example, but you can see that the green is winning, even though it's lower specificity selector, because the layer the importance of the layers here.

[00:03:49]
So it's just to say that don't use layers to target specific elements and don't create sub-layers, even though it feels like this really natural thing to do. Don't use it to create these different things, like components and then my cards, my buttons, my other things, because it's rare that it happened, but there's this possibility for conflict, and it becomes really hard to debug.

[00:04:11]
The dev tools do show you how the layers are impacting things. So it does help, but just to be careful with that, and don't treat them as scoping mechanisms. If you do wanna use scope, scope is a thing in CSS right now ,you can see it's limited availability as of the time of creating this course.

[00:04:26]
It's kind of cool, it's kind of complex, so I'm not going to dive into it, but you can look into that. That's where you could actually scope styles to a specific selector, and they won't bleed out of that, and scope and layers could work really well together, potentially.

[00:04:38]
Just to say, that could be the next level if you do need that extra complexity for the organization of your project as it grows.