Layer & The Cascade

[00:00:00]
>> So last thing that I'd like to talk about are this new structure in CSS that are called layers. And it's another @rule like @media or @supports this one is @layer. And the, @layer CSS rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers, which is really, really complicated.

[00:00:27]
But let's try to interpret. I think a lot of people are thinking about this as a way of bundling their styles for distribution purposes. So in other words, I can bundle my JavaScript into a component. I'm gonna bundle my CSS into a layer and then when you incorporate this into your own document that somehow magically whatever is in that layer will be associated with that particular JavaScript.

[00:00:51]
And I'm afraid to tell you that that isn't necessarily true, but a layer may help you depending on how you configure the rest of your CSS. So let's dig into this a little bit further. This is now the chart for how author style sheets are going to work with layers.

[00:01:12]
So this is a blow up of all of the other cascades. So everything that has to do with user agent, style sheets, user style sheets, all of that is all still part of our cascade, but now let's just focus on what goes on in the author stylesheet. So, what is gonna happen is that are layered styles, so you can just think of this as a grouping of styles that is a layer, they are going to be the least specific styles.

[00:01:43]
And you can indicate exactly what order you want your layers to appear even if they are not appearing in that order within the style sheet, you can spell out exactly, I want this layer first, I want this next one second. Even though there may be distributed all over your style sheet all over several style sheets, you can indicate that.

[00:02:03]
Whatever order you have, the very first layer is the least specific the last layer is the most specific but note that, unlayered styles are gonna take precedence over anything that are inside of layer. So if you're not using layers in your CSS right now, and you import somebody else's layered CSS, their styles will not take priority over yours given the same specificity.

[00:02:30]
So after that comes our inline styles, so all of the unlayered styles, or inline styles, or animations are still the highest priority, then we go to the mirror universe. So we start adding on being important, the unlayered styles are the least specific where they're being important. The layered styles with being important wind up being more specific, and the unlayered styles with the being important wide up being the most specific until we get to transitions.

[00:03:02]
So, I am afraid that we might wind up seeing for people who think that layers are gonna to be this useful thing for exporting. Their styles that are bundled with their JavaScript are gonna wind up littering them with bang importance, because then their styles will take priority over anything that comes from your particular environment.

[00:03:25]
Bear in mind that the goal is, I wanna import somebody's JavaScript widget into my document, and I want it to look like it belongs in the page that I'm on. So if you litter up your layer with all the bang important styles, that is not gonna happen, it'll take on your styling for your JavaScript widget but it may not match the branding for the rest of the webpage.

[00:03:46]
So, try to avoid the urge of putting bang importance all over your layers. The layer syntax, we could talk about that. There's a lot of different ways to call layers in the document, they are called named layers, nested layers and anonymous layers. And so let's just take a quick peek at the Mozilla web page here, MDN, and this is gonna show you a bunch of different ways to include layers.

[00:04:19]
So here inside of the syntax box, let's just talk through all of these very very quickly, the first line there in that syntax box shows you @layer. So it tells you we're gonna talk about a layer. Then we have a name for that layer. So you can assign it whatever name you want.

[00:04:34]
Obviously, you should make it relatable to whatever's inside of the layer. And then you put in your rules. You can just lift them right after that. You can also declare a layer with just a name. You don't have to put any styles inside of that layer. You can simply say that it exists.

[00:04:51]
The third example is something that you might put at the top of your CSS style sheet. This is going to indicate all of the layers that you're going to include inside of this particular style sheet and the order in which they should be considered. So if I had layers here let's say that their names were a, b and c, but yet in my overall style sheet they appeared in the order of c, a, b, they would still be considered by the cascade in the order that I list them here in this first line of code I would say @layer abc.

[00:05:25]
So abc would be the order in which they were considered. And then finally, you can have an anonymous layer. As with all things anonymous in programming that indicates that there is no name associated with the layer. So you could just declare an @layer and put rules inside of it.

[00:05:41]
But bear in mind that when there's no name, it can also be manipulated. So, with a named layer, you can add rules to it later by calling out that name layer and adding on more styles to it. When you work with an anonymous layer, you wouldn't be able to do that.

[00:05:57]
So all of the usual caveats that are associated with anonymous apply here to CSS as well. So I would recommend that you name your layers. Now that you have a sense of what layers are, how the syntax works, let's dig into this inside of our GitHub files. We'll be working in VS Code, and we're gonna work with somebody has distributed a component, it's called add me, and we're going to try incorporating that into our main document.