CSS Layers

[00:00:00]
>> Kevin Powell: All right, so we have our reset in place. One thing, though, that we wanna think about a little bit, we're gonna be talking about project maintenance, one way we can do that is with layers. So layers is a relatively new feature in CSS, but it's full baseline now, and it's something we're gonna be seeing a lot more of, and I wanna explore it in this project.

[00:00:17]
So we can use a layer to sort of encapsulate our reset. And I'll, as we go through everything, we'll explore the benefits of what layers can do but I will show a really quick example. Whereas, if we come in here and it's really easy to do a layer just at the top of your code, you can do an at layer, and then you just give it whatever name you want.

[00:00:37]
So I think reset makes sense here. Open enclosed parentheses, we can grab everything that's there and just move it right inside that layer. Nothing really changes. The reset will work. It hasn't impacted anything but what the cascade layers are doing is the same way that we have layers within our CSS and within the cascade, right?

[00:01:00]
That would go from like, the user agent styles, the author styles, or, sorry, the user styles, and then our own styles. This adds layers within our own CSS file. The advantage of that is, say, this role of list, this has higher specificity on it because it's a attribute selector.

[00:01:16]
Attribute selector is the same as a class selector. So if I did come into my HTML here, and let's just come after here, or we have a list on our page already, sorry, we have our nav there, or this ul. So this is saying anything with a role of list, and this won't be the best example.

[00:01:33]
But what I'm gonna do is just come here and say the color should also be red so we can see it, and we can come on here. And on that ul, I can add a role is equal to list, and we want to get rid of that and say list is here.

[00:01:49]
And then we'll add a list item that we can see that's not a link low there, so it will come in as red. And we'll also pump up the font size so it's a bit easier to see, font size will be 2rem. So you can see the hello there is red, cuz it's getting the color coming from this.On an attribute selector, again higher specificity.

[00:02:14]
If I come down, all the way down outside of, actually this come up here. Another thing with layers is that then you can collapse the entire layer so you can just hide your reset away after and it doesn't get in the way. I could come here and do an out layer of base, and I could say that my ul has a color of green.

[00:02:35]
And even though this is just a regular element selector, it's Overwriting the attribute selector from before. And the reason it's doing that is because this layer comes second. So just CSS, things that come after have more they win. In this case, this layer is coming after, so this layer is winning.

[00:02:54]
So it just makes a way that we can run into less specificity issues. But again, you want to plan things out properly. Properly, because this could also become something where you have a change you're trying to make with an ID selector, and it's not working. And you don't understand why, and it's just because you have something in a layer down below that's an element selector that's overwriting it.

[00:03:13]
So you do want to be a little bit careful, but I do think that they're really worth exploring, and if you organize your layers in a logical way, then they can be really beneficial. Because all of a sudden you are less stressed about coming up with what was the specificity of this selector.

[00:03:25]
Maybe now I can use this selector where there were problems before, and things like that. So, obviously we don't wanna change our colors. So, I'm gonna take that out and I will take this out, and I will take that out. But yeah, that sets us up nicely with our reset.

[00:03:43]
And again, you can collapse that down, so you know where to poke your way into there unless you need to get in there, which makes life a bit easier to. One other option that you can do as well is you can decide what all your layers are without putting any code in them, by doing an @layer and then just doing a comma separated list of your layers.

[00:04:01]
So, you could say reset, base, layout, components, and have as many layers as you want. This is what's setting the order of the importance. And then you can have them down here in any order you want. The order down here doesn't matter anymore. It's this order at the top that's Setting things up.

[00:04:21]
So it can be really handy. You set up the stage, you know the order of things, and then I like keeping them here in order, cuz it makes my life easier to know where things are. But if ever you have some weird stuff going on, or you need to have a different layer down below, you can do that.

[00:04:36]
Cuz you could also, this doesn't make sense, but you could have a reset. Here as well, and have code here and code here, but my base layer would still win, because the reset comes after the base or before the base, so the base is always gonna win. I wouldn't again, it gets complicated.

[00:04:53]
It gets weird doing this. I wouldn't really recommend it but just want to say a little bit on how that works. There's also sublayers. I'll talk about that more once we've built out the project more. It's not something I think we need on a project of this scale, but you can have layers inside of layers.

[00:05:08]
But again, then you start running into like the complexity of the whole thing. If you have a good grasp and a good organization, the sublayers could be useful, but on a project of this size, I don't think there's a huge Which benefit to it. I'm not gonna have the declared one at the top, just because I want to force myself to have them in a bit of a logical order on the page.

[00:05:28]
I think it's a bit easier, but it's a really common practice to declare the order of them at the top of your file. So if you wanna leave that there, you can do that, and we'll talk more about what layers are and what they aren't as we go through it.

[00:05:39]
As well, just cuz there's certain things you definitely don't wanna use layers for, even though it's sort of people's first instinct to do so.
>> Speaker 1: Can you explain the difference with specificity inheritance? I'm sure layers isn't inheritance. It's more specificity, right?
>> Kevin Powell: Yeah, okay, so yeah, it's a really good question actually because inheritance is a big part.

[00:05:59]
Layers yes, okay, the difference between specificity and inheritance with in terms of layers. Layers won't impact inheritance, just because, if something's being inherited, it's like, and the big thing there is your color, right? If we come out here and they say body is color purple. Purple, when I do that, most of the text changes to purple because it's inheriting that color.

[00:06:29]
But my links aren't getting it, my links are still blue, or maybe we'll make it green, just so it stands out more. The links are still a blue color because those have another style that's actually applied directly exactly on the link. So as long as it's being like, yeah, the layers won't have any impact on the inheritance of something.

[00:06:46]
Because they're just inheriting it from wherever that color is coming from, no matter what the specificity of it is. And then if you were to change the color of the links, like, say, in our reset, we change we could have a COVID. Color is green, and they'll become green.

[00:07:04]
And then I could even come down then here and say that my A color is yellow, which we won't really be able to see. ut we can see they sort of disappear, just because this is overriding the style that was in my reset. So we've broken out of having inheritance with those and it's just about specificity in those cases.