Getting started with CSS nesting

hi there my front end friends nesting has come to Native CSS and it's pretty awesome and a really quick example of what it is uh where you might have your navigation styles for something where you have your navigation but then you're using these descendant selectors you're having to repeat yourself with primary navigation well with nesting we can get rid of that and do something like this instead where the UL and the a selectors are nested inside of the primary navigation and it works perfectly fine so if I came here and let's just change this Gap to a 5 RAM and you can see that it has updated up above now for those of you who are used to nesting because you've been using it with a preprocessor like SAS or less this might seem really familiar to you but there's actually some pretty big differences and gotchas and how nesting works with Native CSS first though we're going to talk about the very basics of how it works why we need this Ampersand here when we don't need an ampersand because you only need to have them sometimes but it's different from the preprocessors and how that works so we'll talk about some of the gotchas with it that you might not expect we'll talk about my single favorite feature of nesting and of course we're going to address browser support as well and just before we dive into this just in case you're new here my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and if I can't get you to fall in love with it I'm hoping to at least help you be a little bit less frustrated by it so if you do plan to use nesting in the near future understanding the ins and outs of how it works in the little gotchas that will definitely help you not be as frustrated with it so let's dive in and see what we can do with this so what is nesting well we already sort of saw that when I threw that together where we can have uh this Ampersand here that is replacing the idea of the primary navigation so if we want descendant selectors we don't have to repeat ourselves we can Nest those descendant selectors inside of the parent selector now this leads to this first thing of like why do I have this Ampersand here and it's very important that this is here just to show you if I remove these from here and hit save my navigation is breaking and if you're used to a preprocessor that wouldn't be the case so we'll talk about that in a second but I do want to talk about what might be a little bit of an elephant in the room for some people of you shouldn't use descendant selectors at all and 100 we want to be care careful with specificity and we hear this a lot where they're saying like you know don't you just make everything a class selector that way you just have the same specificity for everything you don't run into any issues and all of that and I definitely think it's good advice early on when you're getting into CSS you're not worrying about these other things but once you sort of get past those early stages and you can understand the implications of the code that you're writing not taking advantage of descendant selectors as far as I'm concerned is like riding a bike for the rest of your life with the training wheels on at one point you probably want to take those training wheels off and take advantage of what a bike can actually do because that bike you know you're you're wasting your time if you're just with the training wheels on all the time but of course you're not going to go all crazy most people aren't going to ride a unicycle and take another wheel off and all of that right so we do want to be a little bit careful uh because we could do something similar I've broke something along the way here but you can see how things are working uh if I did this and this is where nesting definitely becomes an issue where we have like my ul and then I'm nesting another level deep to get the Ally then I'm nesting another level deep to get to My Links here that is in my opinion where the wheels fall off of your bicycle completely we're raising specificity for no good reason we're making things a lot less readable and selectors like this are just kind of pointless so one level deep nesting in my opinion is fine sometimes you might even go two levels deep for an extra hover or something like that if we go back to the original example I had you know you need a hover on there we can do an and hover and I can add a color of red hit save on that and now my links get that so like this extra level of nesting sometimes can be a little bit handy as well in my opinion and it's definitely an opinion you can disagree with me if you don't like the idea of descendant selectors but I think nesting and using even if you're not nesting and you're just using descendant selectors if you're using them one deep it's fine it's when you start going deeper and deeper that's where the problems can start popping up and that brings us to this Ampersand I'm actually using the Ampersand in two different ways here but I want to address what this actually is and it's a new selector that they've added to CSS and it's called the nesting selector and we've seen other we have other symbols that act as selectors as well so just as an example you you've probably even seen use cases where you might have like a nav uh UL or something like that so where this is the direct descendant it's a combinator but we can you can start things off just with that so now we have the Ampersand as well which can act as the nesting selector so it's sort of like taking this primary navigation it's acting as a placeholder here for it so we end up with the primary navigation UL but the other symbol that is a selector unlike the direct you know the combinator I just mentioned is the star which is our Universal selector which just selects everything so we've had symbols before they've added a new one but it is different just very quickly if you're used to preprocessors it is different because if we come and take a look in our Dev tools here we'll notice that it's actually kind of interesting because in SAS Dev tools when we use if you do it it actually gets that like our Ampersand here would actually get compiled into being primary navigation it's a string it gets turned into that if I open my Dev tools here in Chrome and I come take a look here I actually see the Ampersand in here look at that and it's telling me that it's a placeholder for primary navigation and I can see that in my Dev tools which is really really cool and handy but so it's acting as primary navigation UL right there so the nice thing with this is unlike preprocessors is we can actually like you know I can look for that exact selector in my code and I can find it because that's exactly what's here now one thing I have noticed is sometimes and I don't see it on this one sometimes you find like a little broken uh property down below uh that has the Ampersand in it but everything works fine I think it's just the dev tools sort of trying to figure things out a little bit and so this is a little bit like preprocessors with custom properties versus variables like a custom property in CSS is a live value that you can edit and it will change things on your site that are all using that variable and this is a live object that's referencing this primary navigation um so it's it's going to act a little bit there's a few gotchas with it which we're going to get to and that actually raises the point of like why did I even need this in the first place if I nested like this and it's not working and that comes to one of the rules of how nesting is going to be working with within native CSS which is the nested rules have to start with a symbol and you might be wondering what symbols we need so I'm just going to show them right here to you so it's these symbols right here and we can zoom in a little bit on those these are the symbols that we have to use and you'll notice that it might look like this arbitrary list but here's like and you know we have our app media we have hover States we have the class selector we have these combinators right here we have an ID selector at the beginning of an attribute selector and our Universal selector so these are all existing CSS symbols that we had before and now we have the new Ampersand which has also been added and to take a look at how this works with symbols what we're actually going to do is if we look in my navigation here I have this last Li which is my login one at the top has the class of login on there so what I could do is this is all inside of my primary navigation class so let's find that again we'll move back up here and so we have my primary navigation and as long as we're nested in there and this is where the colorization of brackets also really helps there's I think it's native to vs code now actually there used to be an extension for that but so what I could do is I could say and just like I did here the Ampersand and then I could do my login and I could say that the background on this one is going to be white we add a little bit of padding on there it's not going to look nice right now and then we'll just give it a color of black just so just so we have something that's there that looks different but what I could actually do in this case is I can take that Ampersand off and it's still going to work and just to show you if I change this it is working up there and the reason this is working is it's starting with a symbol and this is kind of weird because it feels like this rule of nesting where if it's an element selector you need to have an ampersand if it's not an element selector then I don't need an ampersand and if you think of it that way it is it does feel a little awkward and I don't think it's the right way to think about it I think the right way to think about it is just you always need to have a symbol so if it's just an a like this it's not going to work because there's no symbol at the beginning so the whole purpose of this guy is to add that symbol to make the nesting work and that's not the whole purpose we can actually do some interesting things with this but we can see there is my login and it's working and the other thing is if you don't want to think about that and you just want to say I always need the Ampersand you can always put one from what I understand in the spec the browser behind the scenes is sort of placing these in there anyway and so if you're going to include it just because you just want to be consistent and you never want to forget that's completely fine um but I'm probably if you see me using nesting in future videos I probably won't be bothering with it just remember if it's an element selector you need it Hammer that home because I could we use classes for so much stuff I could see it being one of those things that you forget every now and then especially if you're coming from SAS or something like that where you weren't needing it then obviously it's a little bit different as well and speaking of SAS one thing that was really popular to do in SAS is is to use it for like a bam naming convention where we might have something let's just do it here we have my primary navigation and let's do primary navigation and I'm going to double underscore this with a primary navigation list like that and this is like a common one then here would be like a primary navigation list item a primary navigation link and what you would do and this is really common if you look up nesting tutorials you'll probably find stuff on this because they're using preprocessors where you'd have your primary navigation and then here instead of having the UL because you wanted to do it that single class selector you don't want to use a descendant selector you want your net you want your primary navigation double underscore list and it's not going to work uh so here we could try it where I do that and I make this list and it breaks everything and in CSS nesting this type of we can't concatenate strings together because it's not a string this is a live object like I said so if we go and take a look in my Dev tools here we're going to see that this primary navigation that that rule is not even showing up for it because it's not even targeting this which is a bit of a shame but it's just because what it's doing is it's treating this as one selector and it's treating this part here as a second selector and so it would be sort of the same thing just because like let's just say we had if you have a button accent you could write it like that and write your rule and if you wrote accent dot button like these are the equivalent they're exactly the same thing so writing this here would be the equivalent of writing list uh dot primary navigation in CSS world and sorry for all the squiggle marks um right let's just do that and uh maybe put something here just so there we go um so yeah doing this would be the equivalent of writing something like this and obviously this doesn't work because double underscore list isn't an actual thing and it's the same thing if you wanted just to do this that would be the equivalent of doing this and this could technically be a valid selector so you know CSS doesn't know that you don't have a custom element called list that you might have a class of primary navigation on it so this idea of concatenating strings that you might see from preprocessors we can't do it it's not something that's possible but that doesn't mean that the Ampersand is useless first of all we can use it for the UL list like this like we were doing before but you can actually use it in combination with other stuff just not how you might have you been using it before and the way we would do that is to create compound selectors so if we come down here to where I had my buttons uh here I have my button then I have a primary and and a button accent here and so if we come and take a look I get that not everybody likes this style of naming things uh but if I did it like this with a button primary any button accent then what I could do is I could take away all of this we still want the dot uh and then I could take away this and have an extra close there let me just format this to make it a little bit more readable uh tab that over move that down there we go so one thing you'll also notice is the syntax highlighting from vs code is hit and miss here there is a bug report for it and people are pushing now that browser support's getting better their people are asking um for it to be improved upon so we'll see what happens there and right now this is broken even though these are starting with class symbols so these class selectors should be valid this is looking for a primary that is nested inside of my button so that would be almost like if I had it you know if I had a span here span of primary and the more was in there and hit save that more is getting those colors because this primary is nested inside of that button so in this case that's going to work now we don't want that we want to get something that is my button primary right here and to be able to get the button primary that's where the Ampersand comes in because it's the placeholder for them so I can put that there and now it's not concatenating these it's making a compound selector it's sort of one selector all together so let's go look in our Dev tools so we can see this a little bit more what's actually happening here and so if I take a look here we have my doc button dot primary and so it's the double sort of selector that's on there so this again could be dangerous for specificity reasons you want to make sure you're doing it on purpose maybe you don't like this idea but this is how the Ampersand is going to work with Native CSS nesting so I did want to explain that and the same thing we can go look at this one and then here I have my button accent right there that's getting these colors on it the other thing that this is very useful for even if you don't like this approach um here where we're doing that is when you want to make your hover classes like we saw before because it is super nice just coming in and doing a hover and focus and not having to repeat the um the class name again I absolutely love that so much so here the background could become a dark blue and uh this vs code does that to me sometimes it likes background color so then we get the hover color and focus color uh coming like that this is one of my favorite features of just like quick hover Focus States like that using the Ampersand it can be super useful um so yeah that's one of the nice ones not my favorite but it is a good one and you might just be wondering because we are nested like an extra level deep you know how is this actually going so once again Dev tools are always our friend where if I come on that we'll turn on the hover state right here hide that back away and we can see the end and when I hover on top of the end you see the button and primary you can see it's a little funky because we have we have the double and coming there and here it's a little bit weird too but it gives us the idea of it's an and focus and so it's our primary button basically um so maybe a little Dev Tool Work could be done on that just to make it a little bit more clear but at least we're seeing the exact selector that's being used uh which is always super nice right there even and then we sort of have to hunt for this I'm guessing this will improve over time um because that's a little bit a little bit misleading because that's not exactly the selector that we're looking at but at least it does give us a little bit of an idea and of course we we would see the original down here anyway we have the button primary here and then we have the and focus and add hover for it so pretty easy to find what's happening in there another fun use case for this type of thing really fast would be on like navigations let's just say you wanted like a divider this way or more common I'm not going to make a mobile nav right now but if they stacked on top of each other and you wanted the line separators between them uh right so on the LI so we could say here and say and Li and then in that one do an and not last child and say that the Border uh let's do a border right in this case of three pixels solid yellow just so we can see it um so they're all getting it except for the login here so if I just just for fun if I take that off hit save and we can see that yellow uh maybe I'll make it orange so it stands out a bit more but that is showing up next to my login button so uh it's a little bit weird here because I've double nested it but the and not could be very useful the same way um doing the and hover and and you know Andy and Focus these types of little things like this are that part where like this little it just makes our lives easier as devs um and can be a bit faster to write another thing that's kind of interesting um that it's not a super common pattern this is possible in preprocessors as well um is let's go find my hero let's just do a paragraph and let's say the color of our paragraphs is going to be um breeding of Steel blue just so we can see that things change so you can see all of them have changed and what you could actually do is if we wanted if you had different theming and stuff going on there's other use cases for this but I could say something like dark theme and then do my Ampersand out here and it looks a little bit funky because the Ampersand is here but then I could say that the color in this case is going to be a light blue and then let's go over to my HTML so then on my hero here let's just add a dark theme hit save and you can see that the color actually switched on that and of course we'd probably want to have something like then coming here and doing an and a dark theme is a background I won't do a new gradient let's just do a background of black so it switches um so if it's the Dark theme we get the light blue and in this case the steel blue and the regular time so the steel blue down here or maybe you know for fun let's just make this yellow so they're really different um the thing I like about this pattern is that if I go to my paragraph I can find all the styling for my paragraph in one place uh which and I don't know if this is the change I would make I'd probably rely more on inheritance than doing it this way but uh it's just it's nice to have one selector and then you can find the different stuff going on with that selector instead of having to go and find your dark theme and then find all the different changes it's making if you're going to do this make sure you document it in some way or another because it's not sort of a normal thing that we actually see but we're getting our paragraphs that are inside of our Dark theme so it looks kind of weird um it could be definitely useful but it's one of those things that if someone's not used to this they'll have no idea what they've just come across so document this if you're going to use it now I'm going to get rid of that because it's kind of ugly um not that this site is Beautiful by any means the next thing I want to look at is my favorite thing because I promised you we would talk about my favorite thing with nesting which is that remember there's different symbols that are allowed so our class selector can be working there but another thing that works is the at symbol and that means that we can now Nest media queries and this is the greatest thing ever and so let's say My Hero Let's just boost the font size on here a bit font size is 1.25 Ram let's say or look we made it smaller but we'll stick with that because then what we can do is say an app media and do a Min whip we'll say 780 pixels and we'll do a font size of 2 REM and now it's really big so let's open up our Dev tools click on the little responsive guy and as this shrinks down at one point there we go we get the smaller and the bigger font size coming in and that's this this is one of this is something from the preprocessors that works the same way that I love so much and I'm so happy it's coming to Native CSS because as much as I still do use SAS being able to um do this for me is so nice and we can just see it here at media and font size and it's changing if I go in the end it's the hero right so we know exactly what's happening we can find out where sort of what's going on with it and the font size is getting switched um right there and the media queries working even though I didn't have to you know I don't have to do hero again and then Nest the media query inside that other selector and then add the stuff I love this so very much there is one really important thing with this though um is let's actually take this out and do it the old way the old painful way of doing it of right hero then you'd have your media query like that um and the reason that this is a little bit of a gotcha um that potentially is if I put this up here because this is only for big screens but then this is for all sizes this is going to win uh because it's coming afterwards and nesting can actually change the order of your CSS which is the first time I think um that that actually comes up uh there's with layers you can sort of control stuff in a different way um but this is the first time I think that it literally changes the order of your text or of your rules so here if I take this app media and I put it at the top it's still going to work and you can see the the S code is not happy with me but it's still working clearly and the reason this is actually working is because regular declarations are going to be hoisted to the top um it's when the browser parses through this it's going to find all the regular ones put them first and then take anything that's nested inside and make new rules after that because it still has to sort of go okay how is this impacting things lower down so the order here again if you have regular rules and then nested stuff even if the regular even if the nested things are coming first in the way the CSS is reading it it comes after probably not a big deal in this case it actually could save you from a mistake you made because the media query should come afterwards anyway but it is one of those things that maybe could cause an issue along the way that you're not expecting so it is important to be aware of that and that it can change the order of stuff and another thing that's really important to understand stand is it can actually muck around your specificity in unexpected ways as well and to illustrate how this works let's just come here and if we come and take a look or you know what let's give this we have a section down here and just to sort of we're going to do an ID of introduction because you know maybe you have IDs through and different stuff and you want to style that introduction differently as well so what you end up doing is uh or actually let's just we'll stay with our hero here and let's say our hero and our introduction are both getting similar Styles here we have the gradient that's on both of them the font size is all of that that's great and then I want to grab this H1 and my H2 here and I want to style them so then I come here and I say and uh each one and H2 and I say color is red and the color has gone to Red on both of them and that's that's exactly what we would expect to happen on these two things um but then you know later on it's a few days later you forgot about that code a little bit and you want you don't like this red and you're looking at your HTML and you see oh I have a page title there okay let me come and style this so I do page title and I say color is now blue and it doesn't work oh yeah okay well you know here we have this or maybe even you look in your Dev tools right we can find this in our Dev tools so you go and you look and you go oh it's this and H1 I forgot that I nested it inside of that that hero thing that was coming here okay so that's not a problem and you might have seen a preview of why this is a problem and so you might be saying that this is a class selector plus my H1 so I just need to match that specificity so we can match it with the H1 page title and it doesn't work huh that's weird but our Dev tools actually gave us the answer there when I hovered on top of this you can see that it says is hero introduction and so if you have multiple selections here and then we have stuff nested inside of that the the is is going to be used to create this into a selector and so that can Muck around with your specificity on things because all of a sudden the specificity of this H1 has an ID in it because if you're not familiar with how is works is it uses the highest specificity of all the selectors in there so in this case it's not combining these two together it's a saying it's the same level as an ID selector and so it's basically unbeatable um right so it just it doesn't work and uh so it just means be careful with how you combine your selectors and again a lot of time you don't want to be probably putting in IDs like that but even if you're just using classes here and then you have that it is a descendant selector so we do want to be careful with it but you could have these unintended consequences with it as well and so yeah that's more or less how it works but there's a few important things that I think are worth addressing as well with this is first of all the way that nesting can affect readability and searchability especially when it's used within a preprocessor a lot of people would complain about it because your and H1 wouldn't actually be this selector that you'd be able to find in your Dev tools and so then you'd find something or as I said you might even have something that looks like this in the code but it looks very different in the finished CSS and so it would make things very hard to search for at times now there were with maps and other stuff there's ways to find it anyway but it was a complaint that would come up and the other thing is readability that is kind of can be awkward and especially like right here this might look a little bit strange I think that if you're nesting super super deep readability is definitely impacted but I think a large part of readability is going to be the syntax highlighting improving um just because right now this all being gray I definitely think it doesn't do it any justice but once you get used to how nesting works just like anything else like when Arrow functions first came to JS they were kind of weird looking and then you eventually get used to it the same way here this is something that you may not be familiar with but once you start using it enough it doesn't really hurt the readability as much the you do have to glance up and of course if you have this giant thing that's all nested and you have to scroll up to see what the parent selector is that can be a little bit annoying so a couple of things to watch out for there then of course the the big thing is what's browser support like so here if we come and take a look the table might have a lot more green on it here than you expected and we're at 70 as as of recording we're almost at 73 support for something that's very new that's awesome uh it is coming in the next update of Firefox so that means all the major browsers are going to be supporting it um you know the big thing now it is in Safari and Safari on iOS so it's rolling out now of course that does mean that older devices well you know it's still a lot of people on the older devices for iOS so it doesn't mean we can start using it immediately in production and it is one of those things that if it doesn't work it could break your site so we do want to be careful with it if you are going to be using it but it is something that once it has enough support will probably start being a lot more widely used because it is one of the people's favorite features from preprocessors like SAS and people saying that that's primarily reason that use SAS so maybe they won't have to use it anymore so I see this being something that's going to be widely adopted as soon as browser support does get a bit better with it so playing around with it on personal projects and familiarizing yourself with it is probably a good idea and speaking of preprocessors I mentioned a few of the differences between how nesting Works within native CSS and the preprocessors but I sort of just glanced over them if you're someone who does use SAS and you'd like a much deeper breakdown into the differences and also what what's going to happen to SAS nesting you're curious about that I covered it in this video right here maybe there because if that video is not showing up it means it's not out yet because it's coming out two days after this video does so if it's not out yet and you do not want to miss that video then do make sure that you're subscribed to the channel and with that I would like to thank my enablers of awesome Bailey Andrew James and Rico Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your record on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 68,007

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css nesting, nesting, nesting without sass, nesting without scss, how css works, how to nest css, nesting browser support, browser support

Id: YnWPeA6l5UE

Length: 27min 14sec (1634 seconds)

Published: Tue Jul 18 2023