 So, we're going to talk about the nesting spec in particular, but since not everybody knows what the CSS process is for creating new specifications in CSS, I wanted to go real quick. So, the first thing that we end up with is like this crazy idea, and this crazy idea is called stage one of the specifications, first of all, stage zero is just a crazy idea. So, it writes it up in sort of like the spec format, but it is just some idea of what they want to do. Then we have editors draft, these are the first time it will actually show up on the W3C website, stage one is just editors draft is considered to be really unstable specification, then it will go to stage two, which is working draft, a lot of working drafts end up being implemented in browsers, sometimes with behind the flag, sometimes with like a browser prefix, and way back when working drafts got implemented just in browsers all the time, and the thing that we're most used to is stage three, which is the candidate recommendation. This is a full blown spec, and you're completely safe to implement that is in your browser, and of course, once it's in the browsers, we can start using it. The CSS nesting spec became a stage one spec last March 2019, and yeah, that's where we are. So, the really neat thing about this is that once I get a few more slides into this, I'm going to show you how we can actually use this nesting spec today, and basically we're going to be transpiling this future spec into regular old CSS you can use on any site. So one of the problems with CSS is you end up with a lot of duplicate selectors. If you've got a selector that you want to add some properties to it, but then you also need to modify that, depending on a conditional, like a media query, you need to rewrite the name of the selector inside your media query, and if you need to do hover and focus styles, you need to rewrite the selector again and again. So there's just a lot of duplication here, and this becomes brittle too, because if you're rewriting this file and change this class name from wrapper to something else, you may miss the focus line down here, and then you've changed all the other selectors, but you missed that one line. And the nesting spec aims to solve this, and it solves it in a way if you're familiar with SAS, it's going to look fairly similar. So the CSS nesting spec adds in a couple of new syntaxes, which is the at nest, which is here at the beginning of this second line here, and it also adds in the ampersand. People who've used SAS will recognize the ampersand, and they're not going to recognize the at nest. But the at nest basically says somewhere in this selector, I'm going to have an ampersand, and what you should do is take any parent selectors and take this whole thing and replace it where the ampersand is. So this at nest tells the browsers that I want to change this rule to be HTML.js, space dot wrapper. So it treats this line and this as equivalent. Can you see my cursor when I'm circling these things? Hopefully you are. I'll make sure that I do it relatively slowly so that there's a video lag that doesn't get lost. We actually don't see your cursor. You don't see my cursor. OK, so I will not refer to my cursor anymore then. You could describe what your cursor was going to do. So yeah, I was just saying that the second selector on the left hand side is equivalent to this second selector on the right hand side. So the browsers will treat those as equivalent rule sets. Now for media queries, you don't need an at nest here because usually media queries are at the root level of your CSS file. They're never nested in something according to the current specs. But when you put a media query inside another CSS rule set, the spec knows that you're wanting to nest it. You want to take the entire parent selector and move that inside the media query. So over on the right hand side where it says at media I'm in with 40m, since it's nested inside the dot wrapper, it's going to treat that as equivalent to the left hand side here where it says at media I'm in with 40m and then inside the brackets you have dot wrapper and that rule set there. And then last, I'm going to show you how the ampersand can be used for hovering focus styles. So earlier we'd use just the ampersand HTML.js space ampersand, and it just creates a new selector HTML.js space dot wrapper, that's the equivalent here because there's no space in between the ampersand and the colon hover, it just gets mushed together. So this equivalent of at nest ampersand colon hover becomes dot wrapper colon hover. So you can see on the left hand side the equivalent of old school CSS and this new CSS nesting equivalent on the right hand side. So it's fairly easy. Now, if you use SAS, and I love SAS, that is great, you're probably thinking, why do you need the at nest there? It's like in SAS, it's almost identical, except there's no at nest at all. It's like not needed. And it turns out that we do need it for CSS, like official CSS. And that is because of something called lookahead parsing that the browsers do for performance reasons. When a browser is reading the CSS file, the current way that it parses all the CSS is it only has to look one character ahead at most to figure out, what am I looking at right now? So as it's reading the file, let's take this SAS example and see if this would work in a browser. So my extra light fell over, I will. So let's look at this. This is standard SAS right here. This is not going to work for our CSS back, though. .wrapper, so when the browser sees the period, it knows, oh, this is a CSS class. So as it's reading the file character by character, it already knows it's looking at a CSS class, that this is a selector it's reading and it keeps going and it sees a space and a bracket and it goes, okay, this is the beginning of a rule set. And then it goes to the next line and it sees an H and it goes, hmm, that could be the beginning of a property that begins with H, I'm not sure. And then T and M and L and still it has no idea that this is a, in SAS, this would be a nested rule set. But in CSS, it doesn't know if that's a property, like there aren't any existing properties that begin with HT, but maybe in the future, we would have a new CSS property that does begin with HT and therefore the browser has to be compatible, forward compatible with new CSS syntax and it just has to assume that maybe there is an existing property that I don't know about, because I'm an old browser and there's a new spec. So it doesn't know, it literally doesn't know between whether this is supposed to be nesting or if this is a property and that's bad. So that's why we can't have this SAS style of nesting. We have to put the ampersand nest there so that when it sees inside dot wrapper bracket and it sees an ampersand side, it goes, oh, this is either gonna be a nested conditional or an actual like app nest or like app media or app nest, right? So that's why we have to have the app nest syntax inside prefixing our nested rule sets, right? So I've actually been playing with this for a while. Oh, but actually I wanted to slide in here. There's actually one case where you don't need the app nest and that's when the ampersand comes first in your nested selector, right? So if your ampersand is first, our parser can figure that out. I goes, oh, look, there's an ampersand there. I know that that is a special nesting syntax and it's gonna know that this is a simple app nest. So the app nest is optional in this case. You could put app nest space ampersand space span as your selector or in this case, you could just do ampersand space span, right? Because that ampersand is there, first we can use a simpler syntax. I've been playing around with this for a while in my CSS style sheets. Kind of like having app nests specifically there for all these cases, because it makes those nested rule sets pop out better for me, right? Because I've got like all these properties that are usually on the parent selector and then the nested selector with the app nest there, it really pops out and says, this is a new selector. It's not just more of the same properties from the parent selector. So I kind of like it, but you can use the simpler syntax for app span. And speaking of how do you use it? Let's take a look at this website. This is like one of my favorite websites now. It's called cssdb.org. It is a list of all of the CSS specs that are coming up and how far they are in the process of becoming a full-slash spec. I'm actually gonna jump over to my browser and show you this website directly. So you can see all of these different specifications. So there's an all property, there's break properties, break inside, break before, break after. And it says what stage of the specification process they're in. Then we always have color adjust property, all of the stuff that it lists. The nice thing is that it will also list ways that you can write this in your CSS right now if there's a plugin available to allow you to do that. So for example, the focus container pseudo class. This is actually really great. Really great selector that I like using focus within. It's supported by these browsers. So it already has the can I use sort of information right there. And then it says that if you need a polyfill, you can use this JavaScript library to polyfill for various browsers or this post CSS plugin. Post CSS, not everybody knows what post CSS is, but I'm pretty sure that 99% of you have heard of auto prefixer. This is the tool that will add vendor prefixes to your CSS. Auto prefixer is actually the very first post CSS plugin that was ever created. It was created before they came up with the name post CSS as a group of plugins. All of these post CSS plugins do is they transform your source CSS and transform it into real production ready CSS. So that's what auto prefixer and vendor prefixes to all of your CSS. These other post CSS plugins will take your source CSS files and transform into production ready CSS, right? So somewhere down the bottom here, we're gonna have level one and actually, there's the nesting spec, right? And it has a post CSS plugin that you can use that transforms this into CSS that all browsers can understand right now. Post CSS is pretty easy to configure. I'm using something like this right now on some of my projects, although I've moved my browsers list into a browser.rc file, pretty good file name as I just did that recently. But it's really easy to set up. There's a sort of conglomerate post CSS plugin that's called post CSS preset ENV. And it takes all the CSS specifications that are on track to becoming a real specification get bundled together in this one giant plugin called post CSS preset ENV. And then you can just basically specify in your configuration of this plugin, like I wanna support all stage one and later specs in my source CSS files, right? So this is super easy to set up and this will add the nesting CSS to your files already today. I set up a code pen. A code pen is really nice in that it actually will allow you to play with post CSS. So you can fork this code pen and start playing with the nesting syntax just right there on the websites. This is some simple CSS that I copied from another place. There's a listing from where I got the original idea for adding the arts. Actually, I mean, I'd copied it. I didn't come up with it. And yeah, you should be able to play that. And one last thing I wanna say, it's actually gonna jump back into my browser here. And that is, this is a level one spec. And it is not 100% complete, obviously. One of the things I'm not fully formed yet is that media query nesting. The media query nesting is a little more complicated spec wise because there's this whole other spec called the conditionals, the CSS conditional spec. And that's the one that controls media queries and at supports that is also controlled by that spec. And so we need to modify that spec a little bit to understand this nesting spec. And so that part of it just hasn't been worked out and it hasn't been fully flushed out yet. And there is a discussion group that I would love people to contribute to because there's been three comments in the last two years on this, Jonathan Neil, Amelia and myself. Yeah, we can get more people sort of looking at this and helping the spec move forward. That would be great. So yeah, that's all I wanted to say about CSS nesting. So yeah. Thanks.