 and welcome back to a brand new season of the CSS podcast. We're on season three, baby. Can you believe it? I mean, no, yes, yes, no. I can't believe it. It's been three years. Year three. We're coming at you. Wow. On this show, we break down modern CSS concepts to bring you the best bits and pieces of the platform for building frictionless and engaging web experiences. That sounds pretty fancy, doesn't it? Yep. What you need to know is we're here to help you get caught up on modern web tech. So if you're a developer or designer who builds things on the web, this shows for you. In this season of the CSS podcast, we wanted to keep you up to date with what's new in 2022 because there is a lot happening in Web UI. We've got some pretty powerful APIs landing across modern browsers and we couldn't be more excited. But if you have to support older browsers, don't worry. We'll be highlighting what browser support looks like today and if there are polyfills or tools that you can use to bridge the gap in between. And if you want more content about how to master CSS from basic text color to backgrounds and beyond, check out our other seasons where we covered just that. And... And... Check out the course we put together on web.dev called Learn CSS, aptly named, I must say. And that's a place where you can go to catch up on all things CSS. Speaking of Learn CSS though, and CSS basics, the CSS cascade is one elemental concept that everyone who writes styles runs into. And the fundamental capabilities of that cascade have actually changed quite recently with cascade layers landing in all modern browsers. Oh, good call. But before we dive into at layer and how it's changed the way that we can inject points into the cascade, let's review how it worked before cascade layers landed this year. We also have an episode from season one on the cascade and a Learn CSS module, as Adam just talked about, on exactly this. So definitely review that if you want more in the cascade. So let's talk about order of appearance. Say you have a p tag in your styles with the color of hot pink, and then further down in the same CSS file or an imported file, you have a p color, Rebecca purple. Now all of your paragraphs will be Rebecca purple, because that's the most recent in the order of appearance. If you want all of the paragraphs to be hot pink instead, you could increase the specificity of the first paragraph style and then reflect that in the DOM, but that would be more work and you don't always have control over the DOM. Or you can apply important tags to invert the cascade and make it win. But that would be a hack. With cascade layers, you can give some more information to the browser about the two different paragraph styles like why there are two and when each should apply. Totally. And at layer comes in to give you control and tools to assist in the browser's resolution of that paragraph style, and more, which we'll cover. We should whisper in our pair in our podcast. I would bring a lot more attention to be like, are they whispering to me in this episode? All right. So right now those two paragraph selectors, they're just floating in the global space to CSS just hanging out Margaritas out in the stars. And they're the order of appearance has them battle it out for a winter though. And they were just friends, but now they're having a battle. That's so sad. But okay. So we have at layer. If you add a couple layers in, you can add those paragraph styles within a context and help others and the browser understand the intent of the style. It's all about that style orchestration. Right. We had two paragraph styles. Why were they both there? Put them in a layer with a nice name. Now everyone knows why both of them are there. So I find layers are especially helpful with reducing selector complexity because right, we don't have to do as much battling. We can write more simpler selectors. It helps with theming. It helps with framework and library overrides, resets, normalizer baselines, which are kind of like overrides too. And then pseudo classes like focus visible, like open props recently had a need to use layers so that the custom focus style was easier to override. Even though it was using where it still had some sticky specificity but put it in a layer and now it's much easier for authors to overcome. So let's dig into creating layers now that we have a small overview of when and why to use them. You know, kick us off with the basics of cascade layers. Yeah. So the first thing that you need to know is that layers are defined at the time of their first appearance. So you can define a layer like at layer reset at the top of your CSS entry file. If there's nothing in it, you can just set the order and it'll appear when you do put styles in it. So you could set up your layered order before you even write the styles. The order of appearance of layers is important as it defines layer resolution priority, which is the whole reason that you're using layers. Things that are higher in the stack will win over things that are lower in the stack. So things that come later in that set in that line will win. It is a best practice to define your layer order in one place and ahead of time like you could write at layer reset, base, libraries, and then my app. This is typically done in an index.css or whatever your first entry file into CSS is, maybe it's main, so that the stack is clear and upfront for the rest of the styles to be placed within. Layers created first are lower in the stack, giving them less precedence when compared to styles higher in the stack and order of appearance still matters. But now you can assign styles to someone that's already in the stack that you created. So no matter where you have it later in your CSS file, you can put that into a layer later. You've already set up the layer order and the precedence of those styles. Yeah, good call. Yeah, you pre-define that stack and then things can just load whenever and you can put them into a stack and have that full control upfront. Super nice. So that was defining layers ahead of time. You can also define layers just in time. You can define one layer and put some stuff in it at the same time, like as if you're saying create this layer if it doesn't exist yet and add these styles to it. This could be something along the lines of at layer, space, reset, open up a curly bracket, put a star selector and open in curly bracket and say margin zero, box sizing, border box and end your curlies. And now you have created a layer named reset. You've added a style inside of it all at the same time. And what's kind of cool is even though it got defined with styles inside of it, you can add styles to it later. Just reference the at layer, space, reset block and add some more stuff. So hopefully you're starting to get what this is doing. It's taking out the meticulous management of which import comes before which import or which style comes before which style. It lets you define some layers and as new styles are found, they can easily be placed further down or up in the stack that you pre-define, letting you control the order of appearance for the browser renderer. You can also import entire style sheets into a layer or append more styles later to a layer. So a really great way to use that layer would be to import entire libraries. So you could put at import URL bootstrap.css and then as you import it, you could specify a layer for the import. So you can write, you know, space separated, layer and then in parentheses, libraries. So all together in one place, we've just created an import that we also put into a layer. Libraries or styles don't need to be authored locally. You can also write them this way. It's generally a good idea to define all of your layers up front still so establishing the override order early so it's clear. And speaking of which, if a layer has already been created and it finds another set of styles that want to go into a layer by the same name, it appends them. So you can add to a layer that you already specified earlier in the layer order much later in your CSS files, which is one of its superpowers, one of the really cool things about cascade layers. Styles loaded much later than previous styles can just be inserted into that layer order and then they can be applied as though they were loaded initially right at the beginning. So pretty cool. It's worth noting here too that even with the post CSS at layer and CSS import concat tools, they're already up to date and will handle bundling these styles for you in a performant way. Yep. Very cool tip there. There's also anonymous layers. Ooh, that sounds fun. And these work the same as anonymous. Ooh, who are they? We don't know. They're anonymous. And these work the same as named layers, except they're not named. Well, that's a lame way to describe them. No, they work the same way as layers except that nothing can be assigned to the layer later, right? It doesn't have a name. So these are layered in the order received lower precedents than styles, not in any layer. It's as if you can demote and lock in some styles with the strategy, weaving them into your layers in an anonymous way. There's also nested layers. So you can think of nested layers like nested namespaces. And these can come in super handy when your layer names start to get verbose and repetitive, like base reset, base normalized, base tokens. So instead, you can write these as base dot reset, base dot normalized, base dot tokens, and they all live inside the base layer as named sub layers. So this gives it a nice added layer of organization. It's all about that base. Like you said, base many times, I'm like, this should be the cascade layer song. It's all about that base. It's all about that base. Styles can be added to nested layers at any time, just like normal layers. So what about styles not in a layer? Ooh, what do they do? Well, it turns out, what happens to styles that aren't in a layer? Here's the question, I guess. Are they more or less important than styles in a layer? Well, it turns out they're more important, which is kind of an interesting feature. You would have maybe expected the reverse, but they decided that when they were building this, then it's meaningful to have the existing styles of your application be more important than these future kind of 2022 and beyond styles. And so anything that's not in a layer has more importance than things in a layer. So while creating layers allows managing style importance with orchestrated style folding, it turns out that those styles are only competing against other layers really, and unlayered styles can show up and take precedence nice and easy. Yeah, that's a really important point. If you are working with layers, just be aware that your styles outside of the layer will override any styles you put in the layer. So as I mentioned, great for libraries, great for base styles, overriding, but don't expect any styles you put in a layer to appear on top of your existing styles if that's what you were thinking as a mental understanding of layers. So styles not in a layer have higher priority than unlayered styles, but how are the rest of the layer priorities established? This comes back to our original conversation about order of appearance. So layers that appear first will have a lower priority than layers that come later. So you can think of them like things that come first, you know, show up at the bottom of a stack and anything comes in, they're all piling on top of and the thing on top is going to be the one most recent. So I like to think it's helpful here thinking about its CSS or IT CSS by Harry Roberts, aka the inverted triangle CSS at the lowest priority in its CSS is settings. And this becomes a place for defaults. So in case no additional styles are found in any of the other layers, they can use the things in this lowest layer from settings. The next priority is tools, then generic, then elements, then objects, then components, and then utilities. Each layer that comes next has a higher priority of styles than the one before it. If the layer shows up later, it's got higher priority. You can strategically leverage this so that the layer at the bottom of your styles or the last layer loaded is well, just like normal, the highest priority set of styles. You can also strategically establish the inverted triangle layers with the CSS just like this at layer space settings comma tools comma generic comma elements comma objects comma components comma chameleon comma comma utilities. But yeah, so that's as easy as you can establish the entire inverted triangle with one line of CSS and then all of your styles subsequently just specify which layer they want to be in and you get to decide that as the author. So this layer of priority comes into clear effect when a style is in a low priority layer but has a high specificity selector. So your normal intuition would be that the high specificity selector is going to win. But since it's in a layer, its specificity is scoped to the bounds of that layer. And a higher priority layer can provide a winning selector and style without battling that high specificity selector. I think this is the funniest thing about layers when you're starting to play with them. You have to remember that layers always win. It's it's a whole new entry point in the cascade. It's a really good point, yeah. So let's not forget about important and how that works with layers. Right up the bat, it's good to know that while unlayered styles win over layered styles, if a style in a layer has an important tag on it like the bang important, it wins. And this is because important actually inverts layer order for that style. So the lowest precedent styles become the highest precedent. And this is across all the cascade. So for example, the lowest precedent styles are user agent style styles that the user agent or your browser provides. And if any of these styles have an important applied to them, they invert to be the highest specificity, the highest importance. So it works like this across all of the cascade. I never even knew this until cascade layers came into play. And then the same. Oh, that's how this works. So yeah, layered styles are similar. If there's more than one important style across multiple layers, then you compare their order of appearance and specificity with lower level layers going to be inverted and then having more specificity than higher level layers. So for a really great deep dive on this, there's a talk by our coworker, Brahmas, who did a deep dive into layers and there's really nice visuals that go into why this works and how this works. And we'll put a link to that in the show notes. Is and where can also help with specificity? We have an episode on this as well. It's episode 47, which you can review for more on those selectors. But the TLDR is that they can wipe out the specificity of a selector, like when using where you can group selectors. And with is it takes the higher of the specificity of any of the selectors. So episode 47 really does break that down. I highly recommend giving it a listen if you haven't yet. But yeah, there's so many ways to specify styles. So many ways. There's only more ways. It's so funny when we're talking about important and how it flips it. I for some reason just kept thinking of Missy Elliott and flip it and reverse it. So maybe important. Take your style down, flip it and reverse. Right. So anytime I see important, I'm just be like, Hey, Missy, I see you. I see you. I see you, Missy. All right. So that is a pretty good breakdown of layers voice to use them. Gotcha. Things that are interesting. Let's talk about dev tools. So the dev tools are here to help you manage your layers. You know it because you and I helped. So we're going to make sure that this doesn't deploy without a subsequent dev tool to help you debug it. And the dev tools are very cool. So you'll find them in the styles pane. They'll show which layer the styles came from. And we'll already be ordered how the browser is using them. So it's kind of a very familiar feel in that sidebar. And this can take the guesswork out of using layers. This also can be great for teaching and for debugging. So don't miss the help you get from there. For example, you can easily section out supporting demo styles into a layer called support and put your important demo styles in a demo layer called well demo, making it clear to read easy to understand the purpose of each block of styles and clearly show which styles are more important than others based on the layer and the order of appearance. Also important to note browser support. Yeah. So at layer landed across all modern browsers earlier this year. And it is supported in Firefox 97, Safari 15.4, and Chromium 99. So that's Chrome and Edge. If a browser reads a style sheet that has layers in it, it will ignore everything inside the layer. So keep that in mind. This can be a way for you to progressively enhance your styles with layers, adding only new things, but keeping the base functionality. Or if you don't realize this, it could completely break your styles if you are expecting the code within the layer to work and if it's critical to your styles. So just be aware that the browser will ignore the entire declaration of the layer if it's in a non-supported browser. Classic CSS. It's going to read it and go, hmm, no idea what you are. I'm going to silently throw it away and move on. Yeah. Thank you. That was something we had to test. We were like, is it just going to ignore the outlayer line or the whole declaration block? It's the declaration block. Nice. I mean, that's kind of good. Anyway, that's all for this episode on Cascade Layers. And thank you for joining us. If you have any CSS questions, we'd love to answer them on the show. Just tweet us with the hashtag, csspodcast. I'm Yuna on the internet. So on Twitter, you can find me at UNA. And I'm at Argylink, A-R-G-Y-L-E-I-N-K. And your question could help a lot of people. Also, if you liked the show, please give us a review on whatever podcast app you are using or share this with a friend. That's all we ask of you. Those reviews help other people discover our show and help us have more time to deliver better content for you. Thanks, y'all. We're looking forward to your questions. We'll see you next time.