Managing Multiple Layers

[00:00:00]
>> So we continue to have this stubborn problem with the separate style sheets, where we have our standard style sheet of unlayered styles, we have layered styles inside of the addme style sheet. Even if I were to do something like put all of these styles that are here inside of my style.css, put them in a layered style, we are still not gonna be able to get that addme style to come through as long as it's in a separate style sheet.

[00:00:28]
So what I'm going to do now is, I'm gonna copy the addme.css, just highlight all of it and copy, make sure that that being important is off of the color white. And we had added at one point along the way. And I'm going to go scroll to the bottom of my standard style sheet here.

[00:00:50]
And I'm going to put in @layer addme, it's gonna still be the name, we'll put in the double brackets, and then I'll paste all of my styles inside of addme. And you'll notice that my errors here in VSCode are gonna continue to add up. These are all related to layers once again, and VSCode doesn't know about them, that's why it's giving me all these errors, okay.

[00:01:18]
So now I have a layer inside of the style sheet called addme. What about all of these styles that are unlayered? They are still gonna trump anything inside of addme, even though addme comes later in this document according to the cascade. So what I'm going to do instead, I'm going to get rid of this first line of code here with the @import.

[00:01:37]
I don't need it anymore because I've just added those styles to the end of the document. And I'm going to put in an @layer, and I'm just gonna call this standard. These are my standard styles, they're the ones that I started with. And I am going to wrap those curly brackets around all the styles that I had previously.

[00:02:00]
So everything down to the layer of addme. So I've flattened the cascade in a sense, we no longer have unlayered styles in this document. Everything is inside of a layer, we have a standard layer, and we have an addme layer. Right now, because the addme styles come later, they are going to take priority, just like they would inside of CSS normally.

[00:02:21]
And if we open this up in a default browser, you'll see that our text is white, so that is another possible solution. But, we could also, what happens if, for example, there are other things in here that are conflicting with what we have in our standard style and so we decide to put this addme style earlier in the document.

[00:02:44]
So I put it before my standard styles, and I drop it here, and save again. What color is that text? The pink declaration is gonna come later in the document, so this is gonna show up pink again. All right, this is the last part of this. We can specify what layers we want to have in the order we want them evaluated.

[00:03:10]
So, now at the very top of the document, according to the spec this is where you have to put it, we can say, @layer. And then I can say, standard, addme;. So that is an indication to the browser to evaluate the standard styles first and the addme styles second, even though addme is coming first in the document.

[00:03:37]
And so now when we save this and we take a look at our web browser, and we refresh our page, our style will be white again. So I've just showed you a whole bunch of different ways to solve these conflicts. Just to summarize once again, we have the use of bang important, which I don't like.

[00:03:59]
We can copy over one of our layered styles into our unlayered style so that it takes effect. And there's probably downsides to that. The other possible solution is to include all of our styles in some kind of layer, and then indicate the ordering of those layers. If we needed to, now I had only kept all of my addme styles together in a single layer, we could pull out that one style and give it its own layer name.

[00:04:28]
And I'll show you that here just real quick. Let's just say that that color white is the thing that's driving us bananas, we could add a layer called difficult, because these are the styles that are being difficult for us. And we could then say we just want figure a: any-link.

[00:04:58]
And it's gonna have that color of white. So now it's broken out into its own special layer. We can then say that we addme first, then we want our standard layer, and then we want our difficult layer. So we can sort these in whatever order you want. And if you wanna put the difficult layer first before addme, you can totally do that too.

[00:05:27]
This is the order in which they will be evaluated. So now when I save my style sheet again and I take a look at this inside of my web browser, my text is still white. And that's because I have pulled out that white color into its own layer.

[00:05:44]
And I have the cascade set up so that that is coming last in my document in a functional sort of way. So there's many possible solutions now with layers that give us the flexibility of bringing in styles from lots of different sources. Rewriting our CSS in a whole bunch of different ways to make sure that the styling that we want is applied in the way that we want.

[00:06:06]
While our brand is still preserved, even though we're bringing in all kinds of different styles from all kinds of different locations. Layers are really crazy, they are brand new technology. I think we're gonna see people start to explore these, we'll see more possibilities emerge as people explore these further.

[00:06:25]
So watch for blog posts and such that are gonna be coming out talking more about this new layer specification.