 Hello my friend and friends, if ever you look up CSS specificity, you're bound to find an animated gif of Peter Griffin fighting with a set of blinds because it's one of those things that can tend to frustrate people a little bit and the cascade in general is one of those things that people don't particularly always like with how CSS works and think that maybe there'd be better ways of it working but we're sort of stuck with it and to a certain extent I can see why those frustrations happen and there's even a lot of solutions that come up to try and remove certain parts of the cascade away and this has even led to a lot of different solutions being out there that try and remove parts of the cascade from being what we have to actually worry about but I would caution against those just because once you realize the power of the cascade and what it can do can actually mean that you write a lot less CSS and more maintainable CSS along the way because it's actually a lot more flexible than people give it credit for and we even have a lot of modern CSS solutions these days to help make it more manageable so this video is sort of a crash course in modern approaches and strategies that we can use to make the cascade work for you instead of against you and we're also going to be looking at how we can debug issues that we do run into along the way as well and I am going to be starting with the basics of the cascade and all of that and sort of slowly step our way up into a lot more modern solutions along the way so if you're relatively new to CSS the entire video might be good for you if you're only looking for certain specific things I have time stamped everything or if you want to come back to the video to find sort of that one thing that you forgot how it worked or whatever it is time stamps are all down below if you do want to jump to a specific section so the first thing we're going to do is take a look at this example and what we're going to be looking at is how the cascade evaluates and decides what styles to apply where and the first thing to know is that the word cascade there actually means something because what it does is it's going to look through the CSS file from top to bottom sort of cascade its way down through our file and while it's doing this it's going to find selectors that match an element and then it's going to take the last one that applies to it so even though here I put a font size of 1.25 ram my font size is quite a bit bigger here because we have this font size right there of 1.75 ram coming instead and because it's the same selector for both of them the second one wins so the order is important with the one that's lower down always winning and it's a very simple equation here it goes the body and the body are both equal to one another so the second one wins and of course this can happen where they're both also on the in the same area as well where oops the the second one will win so if I take this and I move it down the second one is winning and if I move it back up the second one is still winning so whichever one comes second will win and this is one of those things that obviously you will never do this intentionally or probably very rarely do this intentionally because there's actually a use case for this type of thing that we're going to explore a little bit later but because you generally won't do this intentionally it can be really annoying when it happens and so I do quickly want to look at how you can debug this so let's go back to how I had it before where we have it down here on a second declaration and I'm going to right click in here and choose inspect to open up my dev tools and if we look in the dev tools here if I have my paragraph selected and it could be on anything my font size is being inherited right now which is another part of how everything works and inheritance is a little bit of a different topic though it is part of sort of the core of css being here here I have my body set to my font size 1.75 rem and if I look down here I have the 1.25 that's being crossed out now unlike how we write our css or the rule at the bottom wins the dev tools show us the rules that are winning first if there's things lower down that are being overwritten so if you see something like this and you go that's not the font size I set on there then you can look down and go yeah that's the font size I set and in this case I'm using a code pen so it's just saying style like this but if you have an actual css file and you're using vs code it will actually show you the line that your code is coming from so that can also help you out and go oh I made a mistake there because I declared it in a lower down section or whatever it is uh and then it's easy enough to just go and delete that or change it or whatever it is and there's actually another choice that you can have here as well um or not choice but there's another solution sometimes in vs code and other code editors will they'll show you if you make a mistake but this is a little bit more limited in how it works because if you have two separate selectors it's not going to show us so if we had this type of mistake where I have my body here and then my body here your code editor won't know that's actually a mistake because it might think that you're doing it on purpose because it's two separate selectors but in the situation where you might do something all within one selector so if I look here this is all inside my header if I come in my header I already have a padding here but I have all these other things going on and I might forget about that along the way and I might come down here and say padding and I just want it to be I don't know two ram or something and vs code is actually highlighting this as an error for me because it sees one selector with the same property being declared two different times and it knows that's probably not intentional again sometimes you might do this on purpose but a lot of the time you won't especially they're separated like this because it generally just means you forgot that you declared one higher up in your selector now for some reason you're not getting this underline like this you can just do a control comma or if you're on a mac that'd be a command comma to open up your settings and in the search right there I'm just going to search for css lint and that's going to bring up all the different linting things that you can have for css which is when it highlights syntax errors generally and if I go down a little bit here you can see right there there is the duplicate properties and I can have it give me a warning so you can choose ignore warning or error and I personally just like having it as a warning because as I said I do sometimes use this on purpose so I don't want it to cause an error but I do want it to warn me just in case it's something I don't intentionally do now there's another important thing that goes on when we're declaring things within this and this is a really good thing though some people that come from more of a computer science background don't particularly like it but it's if you ever have a declaration that's invalid where in other languages if you have something that's invalid it just generally breaks that thing from actually working whereas css just kind of keeps on trucking so let's come in here and we're going to do a font size in here of scooby-doo scooby-doo where are you right so we have a scooby-doo font size there which is clearly invalid we can't do that um so if I come and I take a look once again in my dev tools and we go and look what's happening in here so I have my paragraph there is my body and you can see the font size here scooby-doo with a big exclamation point right there and I love this because it tells me this unlike here where everything was valid right my font size 1.25 ram that was there there's nothing wrong with it so there's no error there's nothing going on in the dev tool but it's just saying this isn't being applied because something else is overwriting it whereas with the scooby-doo it's saying this isn't working because there's an error and I can see what that error is and in this case it's an invalid property value uh you could also have a typo within your font size or something like that and scooby-doo is obviously a very silly example of the type of typo you might make but there's lots of times where you might misspell a value for something and you just don't see the typo happens to all of us all the time so it's just a nice way to be like wait that why is that invalid and then you see the typo for it so when it comes across something like that and goes well this is an invalid value then it just goes well I'm going to go up to the last value that was valid and use that one instead and actually this leads us to what I wanted to talk about when it comes to how we can actually use this in an effective way uh and do it on purpose where you might want to put two different values and in a sense it's sort of a defensive way that we can write some css uh or maybe a progressive enhancement way of doing it and my example here is I have this site here which is my awesome site with viewport height and what I've done here I'm gonna look at some code for this in a second but in this area here I've set the entire height to 100 vh which is 100 viewport height to make it fit and I have this part at the bottom that I always want to be visible and even if I'm in my responsive mode here you can see as I move around uh it's always working in the responsive mode if you open your dev tools it's this little icon right here so if I turn that off it goes to regular and turn it back on um so people always ask me about this when I'm using it so the little icon there in chrome firefox has one on the other side and safari has their own version of it as well but you can see that as I move that around it's always sticking on the bottom the problem is that's not actually how this would work on a phone so here I've opened the same site on my phone and you can see part of the text there at the bottom is actually missing and that's because of my header at the top over here uh it's not the header but like where the url goes that little ui element there is actually making the viewport 100 viewport height but it's starting lower down and then if I scroll a little bit it's sort of fixing it because now I actually get that at 100 viewport height there and this is a really annoying and it happens on all phones that this problem happens but then we can solve this by using other units like dvh or svh so here I've just switched over to the svh version and you can see that even though the address bar is here at the top that we have the entire important message here at the bottom working and if we go over on this version of it here you can see the same thing I can switch over and it's still functions here the problem with svh is browser support isn't perfect for it even though it solves my problem but we can use that and leverage css in a good way here where here's sort of my simplified example of what we were just looking at where I have this header with the min height of 100 bh and ideally that's what I want but to ensure that everything works properly what I can actually do here is do a min height of 100 svh and rely on most browsers using this one because again which one is the browser going to use it's going to use the last one that it comes across but if a browser doesn't recognize this one right here instead of using that declaration it goes well this is invalid I don't know what an svh is because I'm an old browser and I don't support this feature I'm going to go and find the last declaration that is using a min height that has a valid value in which case it will fall back to this instead of having no fall back at all and then the header completely shrinks away so this is a very easy way to add features that may have not the best browser support where it's just a single declaration you just declare an older one that's maybe not quite as good but then you can follow that up with a more modern approach that does exactly what you want it to now this next little tip doesn't really necessarily fit into the cascade but it does fit into this idea that we sort of talked about here and it also fits into using modern css so I do want to talk about it really quickly which is just at supports where if ever you have something and you can see here I have this navigation that's right there and when I scroll down then at one point it comes in and it looks different and I've changed the styling of it I recently did a video on this so if you'd like to check out that video there's a card popping up right now for it but with this I created this with css only the problem there is browser support is not perfect for this in fact right now it's chrome only and I didn't want my navigation to be completely broken on other browsers so what I did is I included a lot of that inside of this at supports here so it means the browser is going to come down it's going to use all of these styles here and then if it supports an animation timeline it gets a whole bunch of new things and I'm actually overriding my top right there so again I'm using the order but only if this feature is supported so if we're on a different browser than chrome what would happen is you would just get a normal navigation there we go it kicked in a normal sticky nav that just stays at the top and functions just fine but if you are on a browser that supports this and as more browsers gain support for it more important people will get this new and improved version of it and then now we get the second one like we saw right at the beginning so we're still relying on the order of things and the order that we're going in and then if we're supporting something we can add new things to what we're doing all right or and overwrite other features like my top here along the way so order still does come into this you wouldn't put a supports before you would put other things just like you wouldn't put a media query before you put your regular declaration the same type of idea here because we want our media query to overwrite other styles a lot of the time so we rely on the order of things and I'm doing exactly that same thing right here and I'm not going to deep dive supports but if you do want more information on it there is a link in the description on a video that dives into a deeper examples of how you can use it but the main purpose for at supports is really if you have a lot of declarations that you want to you know make sure are working if you have a single declaration or a single value that you want this type of method in my opinion works really well and there's no reason to have to use the at supports in situations like this one and that was a lot of talk just on the order that things come in but it shows how important that side of things is but there's a lot more than just the order obviously but the other big one is specificity and that's where every selector that we have has a priority and part of that is if they have the same priority then the order comes in but there's other ways to make selectors more important and understanding specificity is one of the most important things to know about if you're writing a lot of css and I actually covered it in a lot of detail in an older video but it's still a really good video where I go into exactly how it's all works so if you do want to deep dive the topic a bit more there is a card popping up once again for that video though in this one now I'm going to go into a few just simple examples to remind you I'm going to assume that you have the basics down but we'll do a quick refresher on just how it works but then we're also going to look once again at how we can debug issues with it as well as how modern css plays into it because there's a lot of different things with modern css that sort of throw a wrinkle into how specificity is calculated so let's jump on over to this example right here and you'll see here I have three different paragraphs that are set up the first one is a class and an id on it the second one has the same class but no id and the third one is just a regular old paragraph and if I come and look at my styling here I have my intro I have my text and I have my paragraph and I put them in this order on purpose to show that intro is actually winning right so on this first paragraph where I have it is a paragraph it is it my text also works here and the intro is here and the intro is the one that's winning right now even though it's the first one so the order here isn't being applied and the reason for that is ids have the highest level of specificity and you can think of it a little bit like how you weigh things ids have the heaviest weight classes are second paragraphs are third and of course we have pseudo selectors and pseudo elements that also come into this game as well and again I'm not going to go deep into this right now because I had that other video that I mentioned but you could have 100 class selectors on something a single id will still overwrite it and you can have a thousand element selectors and a single class would overwrite that one so ids always will win over classes and classes will always win over paragraphs and then you can also apply though of course you could also have things that are the same as like p dot my text in which case I have an element selector and a class selector so that's going to be higher specificity than just the class selector on its own and I'm not going to look at this right now with this example but it's just to say that you can combine different selectors and that will have an impact on the specificity as well and before we look into some of the modern things we can do with this I just want to look at this example here because once again if we go into our dev tools and dev tools are always like if you have any problems something's not working always open up your dev tools and see what's going on and you can see here I have the intro my text and paragraph all right there but if I go in here and I hover over the p and so whatever your selector is as long as you're hovering over that selector it's going to show you what the specificity of that selector is so we can see that it is zero zero one if I go on my text it will be a zero one zero and if we go on to the intro here one zero zero and again these are separate things so you could have a hundred class selectors on something which I wouldn't recommend but you could it would just be zero one hundred zero which is why a single id would overwrite whatever you do for your classes once again it's showing us the order that these are going in and it's going well I had a paragraph I'm not using that because this class selector is overriding it and I'm not using this class one because my intro is overriding it and the order of them doesn't matter because of the specificity of the selectors that are there so if ever there's something weird and this is definitely where if you have like a hover class coming in on something the hover does influence your specificity so sometimes you don't realize that or there's something weird that's going on this can be a nice way to go oh I didn't realize that had an impact on specificity and you see it here and you might understand why a selector is winning over another one but as I said I want to look more at the modern things that we have they can impact specificity namely the is has where and not pseudo selectors that we have and how they impact specificity because it's not super obvious all the time how they're actually working when it comes to the specificity at the very least where is kind of obvious but the other ones they might not be quite what you expect them to be so we're going to look at that now but the one thing I just want to say really quickly is I'm not really going to do a deep dive on is has where and all of that I just want to sort of look at their impacts on specificity even though we'll get an idea of how they work but if you do want a deep dive on those as you might have guessed there is a card popping up and I'll put a link in the description to a video where I go into a lot more detail on how they work but looking at this quickly I have my is selector here and I have an h1 h2 h3 and this does have a specificity of 001 so it only has the specificity of an element selector this is really important because some people assume that because this is a pseudo class that it's actually going to have specificity on its own it does not have any and we just saw before how if we do like a hover it's the same with a focus other pseudo classes like that they do act as a class when it comes to the level of specificity but any of your pseudo selectors that have parentheses so is has where not all of those on their own don't actually contribute to specificity where the specificity comes into things is where we have the elements inside of the parentheses and those do contribute towards it so in this case it's looking at this and goes all of these are element selectors now I'm not going to count all three of them but we only have element selectors in here so I'm going to count this as a specificity as one because that's the highest that we have within these parentheses that's very different from the where down here and where is the easiest one to understand because where is like the sibling of is and both of these just allow us to group selectors together but what's important with where is there's zero specificity at all so anything you put in here it doesn't matter what it is an ID a class anything go crazy anything within those parentheses will count as zero specificity so that can right away be very useful if you need to write a selector that normally would have higher specificity but that higher specificity could potentially cause some problems down the road you can use where to remove that specificity from the selector and that can solve your problem is on the other hand it does contribute to it so that's why my orange red is winning over my color blue here now I'm going to also take a look at our not here so not works in the same way as the is where if I have a selector the not doesn't contribute to it but the p that's in here does you can see I've said not not p so it's selecting all my headings because that's all I have on this page and it's changing their color once again this and this have the same specificity so they're evaluated equally they have the same weight so that means the one that's lower down is going to win so orders still important even when we're dealing with specificity because if you have equal specificity then the order wins now where things get more interesting here though isn't when you have these single classes or even lists of classes like we have here it's when we bring other selectors into the mix so if I come down here on this one and I say is h1 h2 h3 id I can actually use that to boost my specificity on this selector and it's sort of artificially doing it my id here isn't looking at anything on the page this could just be like random but it sees that there's an id in here so it's choosing the highest specificity of any of the selectors in here to apply it to this entire rule so if we come and take a look on this heading one and you know I'll just change we have orange red for both of these so I'm just going to make this one yellow just so we can see that it's different and we'll do an inspect on there and when I do that once again our dev tools help us out so you can see that my h1 h2s being overwritten my khakis being overwritten and then this one is winning and if I have her on top we can see that the specificity is the 100 which is all coming from that random id that I've placed in there now normally I wouldn't suggest doing something like this but it is good to know because I'm sure many people who are listening to this have worked with some sort of CMS or something like WordPress or maybe even something with an older version of bootstrap where you're trying to overwrite something that actually has some pretty high specificity going on there's like this weird selector and you want to be able to overwrite it this could be a way of doing it without having to rely on important though it's still pretty heavy handed and might actually cause more confusion than important would so I would be careful with it but it is a potential way that you could boost the specificity of something and you could also use it like I've seen people that have to string together multiple classes just to create a higher specificity selector for something to overwrite something else somewhere so this could be one way that you could overcome it again without having to rely on using important and this is the same thing with our not selector so as long as you have an id that's inside of those parentheses the same is going to apply there and all of these same things are also going to work if we have a has selector as well so here I've just quickly put this example together where we have a few different things going on but I have my is with an id selector in there just to boost specificity on my heading so we can see that's overwriting this one so once again the order isn't important if one of them has higher specificity so higher specificity will win equal specificity then the order comes into play then I have my p span of orange red here and then I'm using the where and if you remember where means zero specificity so my p span is this one right here we can see that it is orange red and so here I'm using my where and even though I have that random id in there the light green isn't working because my where means zero specificity and it's also not working because I made a typo in there so let's fix that before everybody calls me out and says that's the reason that it's not working so if I take off this light blue we should see that the entire paragraph has changed to the light green but as soon as I just come in here even though this is a single element selector on here the light blue is working so where it just removes any form of specificity and the same rules with our IDs and everything also applies to our has selector as well the has selector I'm not going to deep dive it now but we're basically saying if my paragraph has a span this paragraph has a span so it's changing these two down here don't have spans in them so their colors aren't changing once again if you'd like more information I did talk about the has in that video that I mentioned before where I explain how it works but the general thing to remember here even if you're not really into the world of where it is and has and not yet and you haven't explored that yet it's just to remember that you have any pseudo selector that also has parentheses in it the pseudo selector itself the is or the has or the not or the where does not affect the specificity it's only what's inside of those selectors that counts in all of those it's only taking the highest specificity selector out of all of them and it's applying that to everything that is part of that selector so that's sort of the key thing to remember of course except for our where selector because that just means no specificity at all so that was a lot right there and we're going to get into the next layer of things pun intended because we're going to talk about layers because we've seen how order affects things and how specificity affects things and we can actually get more control over all of this now as well because we can actually create our own layers within our CSS files and these layers can be helpful for organizing things but they actually have a very big impact on the order and they have a very big impact on how specificity works as well so you want to have a good understanding of those before you really get into the world of layers just as a little bit of a warning but let's dive into it now and see how layers do work so here I have a simple example setup where I just have some text with you know paragraphs in there and I have my regular body I have an h1 and then down here I have a layer and another layer layer is an at rule you might have seen them at the bottom of a few of the demos that I was doing up until now as well and basically you can say at layer and then give your layer a name so I have my way less important layer first and then you probably have some other code and other stuff going on and then you might have my a much more important layer coming after that and right now this one is the one that's winning and you might be saying Kevin of course this one is winning we have this same selector for both of them so the specificity of both of these is equal so then order comes into play and the second one will win but let's let's try something here I'm going to come and let's move this down I'm going to add an ID here ID is equal to let's call it test so we're going to use it for testing purposes and let's come on this first one here we're going to switch this one over to my test and as you might guess this one here is going to change but it doesn't wait what why why isn't it changing the reason it's not changing is because this layer here is still winning that's weird right because I have an ID which should always be higher specificity so it should be winning even though this is coming after it because this is just a lowly element selector but layers change the game and how everything works because the specificity of this is scoped to this layer only so all the rules in here are going to be evaluated against each other so if I had let's just say here I did a p and its color purple and we'll take off my test here let's just do a p here p there and let's remove this one for the moment we'll comment it out you can see that this the font size is coming from here and then my color purple is coming from this one as you'd guess and then if I came and I did my test on this first one test this these rules will apply to the first one here and then this color purple will apply to those two here this makes perfect sense right because the ID gets this styles the regular paragraphs get those other ones so this is this little self encapsulated area where all of the specificity rules and the order and all of that are being applied but as soon as we go outside of that layer none of that matters anymore if there's another layer because this is going to reevaluate all these rules and all of its own things over here and because this layer is second this layer is more important can be a little bit weird at the beginning there's a lot of very good use cases for this but before we get into those I just want to show you how we can see this in our dev tools because once again they do help us where you can see here my ID is being overwritten by what's happening here even though we can see a high specificity on this one and we can see the low specificity on that one right there the other thing it is showing here though is that we have layers and if I click on any of those layers or we can click on this little toggle here and it will open up the CSS layer panel and it says implicit outer layer we'll talk about that in a second but then we have my zero way less important layer my number one my super important layer and the order here and the numbering that's going to go on these is the order of importance of these so zero is the least important then we'd have a one or two or three or four it's going to keep count of all the different layers you have and it's going to show us the order they're put so any selector in this layer is going to overwrite any selector in this layer if they match the same element it doesn't matter what the specificity of anything in this layer is if the same thing is being styled in this layer this layer is always going to win and CSS layers have been around for a while now they were actually introduced in 2022 but they're hitting about 95 percent browser support as I'm recording this so I'm actually excited because I think we're going to start seeing a lot more people using layers and we're going to start seeing them out in the wild it's probably starting right about now in bigger and bigger projects so it's definitely something to keep your eye on there are a few other important things to understand with layers though one thing is I'm going to change the name of these just to make life a little bit easier so this will be my layer one and this will be my layer two and one thing we can do with layers because right now they're working the same way but I can actually come all the way at the top and I can define my layers up here so I can say at layers sorry at layer singular not plural and then I can do one two and everything's going to work the same way it was working before what's happening here though is I'm defining the order and then over here I'm placing things into my layers why that's important is if I put two first and then we put one second it's going to switch the order of them because my we're saying that two is coming first I guess the naming now is actually kind of terrible and I shouldn't have used two and one but we're saying everything in layer two is less important than everything in layer one because layer two comes before layer one so now layer one has become my more important layer and to me this is useful because you define all your layers and then you can place things in your layers lower down in your css and not worry too much about the order that things are coming in as long as you know which layer they're going in and the order of all of your layers along the way and of course you probably wouldn't name your layers to one and stuff like that where I see layers coming in that could be useful is you probably do like a you probably do something actually like third party so say I'd like bootstrap or something like that that you're importing you can import that then you can do a reset then you can have your base styles then you can have your layout and you could create layers where you know everything's going to win and at the very end utilities would probably come at the end there because your utilities would be the one that's most important and you want it to like overwrite other things and the nice thing about doing it like this would be the third party ones would be the least important so even if you're using some third party thing like bootstrap or some other framework that's a little bit heavy handed at times and this could even be on an existing project where you're just like okay I just want to shove all of that off into its own layer now because then if ever you need to overwrite something you could do it with an element selector and of course this means you do need to be careful there's implications in what that could actually potentially mean but it does make it a lot easier to work with things where there might be you don't want to be so heavy handed or this could be really useful if you're updating a code base where you could put all of your older code into a sort of a low specificity layer you know one of the early layers and then the new things that you're working on could come into a higher layer and the benefit there is you wouldn't be worried like if you did some bad practice and that old code of yours it's easy to make those updates because you even if you went kind of crazy you'd be fine except if you used important because important gets flipped on its head and to show you what I mean by that let's come here and we'll go back to my one two just to use the actual code that we have here and we're going to see that this cause problems so if I go and we use important here let's do this is an ID selector it's super important so I come on my font size and we say important you can see that it's actually winning now so we've we've raised the importance of that as you might guess important always sort of this is the winning one so my font size is now winning and then you go in this layer and you go I'm going to overwrite that and you put important here and it doesn't work important is actually flipped on its head when we use layers and you might go Kevin this is super weird but this happens because layers aren't new to CSS they're just new that we can create author controlled layers we've always had three layers we've had the user agent styles which I'm sure you're familiar with we have the user styles which you know as a user you it's not so much it's not so common these days but you can inject styles into your browser and then you also have the author styles which are our own and so it always goes like the user styles would overwrite the user agent and then of course our own styles the the person writing the CSS here would overwrite the user styles but they enabled it so if a user uses important that would take precedence over everything else so if a user puts important on something the author us writing CSS can't overwrite that's user styles and if a user agent style sheet uses important it will actually be impossible to overwrite and you might be saying when would you ever see that there are actually a few important declarations in the user agent styles I'll give you a little challenge of going to find what they are there's not a ton but they do exist and there's good reasons for them being in there but yeah when we're coming into here important acts counterintuitively let's say and I think in my own opinion it's just more of a reason to completely avoid using important on anything we do because it just would get very confusing very quickly and the last thing I want to say is before we get into the next subject is I have a layer one here a layer two here and let's just come up here and put a P of a color of orange red and this is actually going to win even though it's not in a layer and you actually got a little bit of a hint of that coming in before because if I do my inspect here and we look in here again you remember I said we'd come back to it where if I go into those styles we have the implicit outer layer then our one and our two here and their number zero then the one and then our two goes here so anything that's not in a layer has higher precedence than anything that is inside of a layer so that's why you might just want to have a single layer for all the easy to override stuff and then you just have your own styles after that we don't have to get complicated in how you use layers but it is important to know that if something is outside of a layer it has the highest precedence then we go through all of our layers in the order that we've declared them and as you can see we have lots of tools that we can use to help us with specificity and dealing with the cascade and I do think there's an added complexity to all of this that we're going to have to sort of get used to using and if you're new to CSS and you're watching this right now don't overthink it don't overdo it because definitely that could happen but there is one more thing that is going to have a big impact on how people write their CSS and then everything we're looking at right now which we're going to dive into next it's browser it is relatively new browser supports just below 70% but it is in chromium browsers and it was just added to safari very recently in 17.4 so it was the time of recording but I'll put a browser support table for it link in the description because if you're watching this in the future it might be useful to know because as I said right now we probably don't want to do it unless you're just experimenting with it but not too long from now you might actually be seeing this in code basis so I do want to cover it because it's going to as I said change how we do things a little bit but yeah just before I get into it I do want to say don't be overwhelmed if you're new because a lot of this is these extra tools we're doing and I'm really doing this as an overview of what all of these are it's not a deep dive into each of the specific topics but I just want to make people aware of all of these new modern features that we have that can help us deal with the cascade and all of that if you're relatively new stick with the basics and slowly maybe experiment with one of these at a time wrap your mind around how it works how it impacts things how you like to work with it and then you'd go and add the next thing to your repertoire along the way from there but yeah here's the last one it's one that I'm actually very excited about which is scope and scope is something that people have wanted in css for a while uh I wasn't ever sure if it would actually come but it's here now and there's some interesting things that we can do with it I'm not going to be deep diving it right now either it's something that I'm still experimenting with and we've had variations of this with you know the scoped css in different ways with js frameworks like astro and view and there's been other things in react that sort of have a similar way of working scope in css sort of has that idea where we can scope stuff to an element but it also has a little bit more as usual when we add something as a native css feature it's a little bit more powerful because it's the browser itself that's interpreting it so here's a bit of a simple example where I have this navigation at the top and I can't see my my button very well and the reason I can't see that is if we come here and look at my button itself I have some coloring on here and normally I would be able to see my text but I have this primary navigation a selector right here and that has the color white on it so let's turn that white off and then you can see my my subscribe button is now working it's there I can see it there's no problem but when I say primary navigation a we're boosting our specificity because we have a class selector and an element selector so that's overwriting these styles on my regular button here and that's kind of annoying and actually I just realized don't even have a let's just see color black here so we have something for it to overwrite um and there we go it's it's overwriting my colors now um that I had on there and that's kind of annoying you might say well this is a reason not to use a descendant selector but I disagree I actually think it's fine to use descendant selectors but it's important to know that you could have these potential impacts and scope is something that we're going to be able to use to potentially prevent these types of issues so one of the ways we could do that is instead of saying primary navigation like this I could instead say at scope and in here do my primary navigation and then I could have my a selector let's just do this there we go and then we get the a on its own like that and that actually fixes my issue that I had and there's other ways you could use your where selector or something as well to reduce the specificity but we're going to see that we can do a little bit more with this but basically what this is saying is we're saying any link that's inside of primary navigation will get these styles but the advantage is this is only an element selector so we're any link that's in my primary navigation but as long as we have a class that's higher specificity so it's going to overwrite it and we keep the color here on my subscribe button so already I see that as a nice little win that we can have right there but where this could actually now become problematic is if I did an a hover and let's just say I change my color now to uh I don't know purple just so we have a different color on there uh I probably wouldn't do purple because the contrast is really low but that purple is now affecting my button and the reason that purple is affecting my button is because this hover is counting towards specificity all right so we're boosting specificity it's the same as a class selector right now because it's a pseudo class and so it does that I could wrap all of this in a where to prevent that from happening but another thing that scope allows us to do is to say how far something is going so I could say primary navigation and then I could say to dot btn and I don't personally think this is the best example but as I said I'm just been playing around with scope styles recently so I'm still looking for ways to use this to feature in good ways but you can see these are working and then this one isn't getting the purple and you know I'm going to change this to yellow just to make it more obvious that it's not working so those are yellow and this one is not yellow because this will go my primary navigation any link but as soon as we go to a button it's going to stop and it will not go inside of that button and it's not stopping at that point so if I just move my blog link down to be after it that blog link will still work the same way so it's not saying like from here until here it's saying scope that style for my primary navigation but don't go inside of anything that has a class of button and style things that are there so it sort of stops the styling at a certain point or a certain class as well which is really really cool again I don't think this is the right use case for it necessarily but it could come in handy in the right spot but I think we're going to start seeing some some more useful patterns come up with this where you can prevent styles not only being scoped to something then prevent them from bleeding into descendants which is really really interesting especially because we have that control I don't have to put the two or the two could be an immediate descendant it could be something that could potentially be six levels deep it could be whatever it is we're limiting where the scope of the styles are and that can be really interesting and have big impacts on how we write our CSS and the other way we can actually use scope is let's actually take all of this off and I'm going to cut this here anyway that's kind of weird so I have an on style navigation technically now what I could do is I can come here and do a style inside of this component or this this thing and I can put those styles with my at scope and if I do that those styles are being scoped now they will apply to everything because I don't have the the two in here but those styles are being scoped to this that we have right here so just to show you if I take this out from here and I put it inside this li and I paste it so it's inside the first li the first li is getting those styles and it's not applying anywhere else um so again I wouldn't be using it in my navigation specifically in this way but if you're working with components in a javascript framework this could be really useful to just put a little scoped style tag within the element itself and know that the styles you're writing are scoped to that and it potentially could be a little bit more powerful because it's native CSS then uh if you're using the the actual scope styles that come with something like ask your review and there is definitely more to scope I haven't done a video on it yet but I am planning one where I'm going to deep dive the topic a lot more but I did want to introduce it in this video just to give a quick overview of how it works but it's definitely a topic that you could get into more if you're watching this video in the future I will link in the description to that scoped CSS video but in the meantime there are links to some articles that do go into more depth that are in the description and so I hope all of this has given you a little bit better of an understanding of some of the modern features that we have but of course as I said this was a quick overview of a lot of them and I mentioned a lot of other videos along the way so if you'd like to check out any of those videos I put them all in a playlist that is right here for your viewing pleasure and with that I would really like to thank my enablers of awesome Tim, Simon, Andrew and Philip as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome