CSS Cascade Layers Tutorial #1 - Selector Specificity 101

Key Takeaways

hey there gang and welcome to this crash course all about CSS Cascade [Music] layers okay then so if you've been using CSS for any length of time then you've probably been hit in the face on several occasions with conflicting Styles like this for example where I've created a BTN class for any elements including links they should be styled as buttons and they're meant to look like this one right here in the browser but at the bottom of the article the link with a class of B BN isn't styled that way and it should be according to that BTN class right and that's because we've got a conflict going on between that BTN selector and a selector that targets all anchor tags inside an article tag within this main content class and because of the rules of selector specificity the selector which targets all the links in the article wins and those CSS rules are applied instead of the BTM ones so then it becomes a game of trying to make the button selector longer and more specific so that it wins the conflict battle or even worse throwing a few important keywords here and there and both of these workarounds are not ideal because they just escalate the problem of conflicting Styles in the future and you sometimes end up with a crazy CSS soup of longar selectors and important statements on every other rule so to combat this we now have something called Cascade layers to group selectors together within different layers and these Cascade layers remove some of the headaches that come with conflicting selectors and specificity so in this series we're going to be taking a close look at what Cascade layers are and how we use them to good effect but to begin with I think it's best to recap on what exactly selector specificity is and how the browser determines which selectors are more specific than others so let's go back to this BTN class example which is basically targeting any element with a class of BTN and that ultimately includes anchor tags that have that class but it could be other elements too like button elements and then we also have another selector which is targeting all anchor tags in inside the article tag within the main content class and in this case we get a bit of crossover where we have an anchor tag with a class of BTM which might also be inside an article element within the main content and that means for this anchor tag we have two selectors trying to style it and those styles conflict with each other one of the selectors wants to make the text white the other green and one wants to make the background green the other transparent so the browser needs to make a decision now about how to style this anchor tag whether to use the GN class Styles or the article anchor tag Styles within the main content and it does this by trying to figure out which of these selectors is more specific in this case it determines the article anchor tag within the main content to be more specific and it uses this selector to style it but how exactly did it determine which one was more specific well in CSS we have different groups of selectors and each group of selectors has a weight associated with it so type selectors which are selectors which Target elements directly like P H2 article a All That Jazz they have a weight of one class selectors have a weight of 10 so that's things like BTN or leading and ID selectors have a weight of 100 and that's for any selector which starts with the hash sign to select an element with a given ID something we don't really do much of in CSS these days so when we make a complete selector we might use a combination of these different things to Target specific elements for example I could write a select which was just BTN and the total weight of that selector would just be 10 because it's just a class selector on its own but then I could write another selector dot main content then article then a and to work out the total weight of that selector we' apply weights to each individual part of it and then add them all up in this case we start with a class selector which has a weight of 10 then a type selector which has a weight of one and then another type selector which also has a weight of one so the total weight of this full selector would be 10+ 1 + 1 which is 12 so the first selector had a total weight of 10 and the second selector had a total weight of 12 and that means if these selectors both end up targeting the same elements and have conflicting Styles then the selector with the highest total weight wins and those Styles will be applied in this case that's the second select with a total weight of 12 and that's why the BTN Styles don't get applied to the Anchor tag inside the article in the browser so with that in mind let's have a quick look at another couple of examples and try and figure out which selectors have the highest total weight or in other words which selectors are more specific all right so we've got two sets of selectors really we've got this set which is both targeted in the same thing and we've got this set and both of these are targetting the same thing so we've got to work out which is more specific out of these two and then which one's more specific out of these two so let's start with this one we've got a type selector which has a weight of one another type selector P which has a we to one so that's two so far then a class selector that's 10 so that's 12 in total then this thing right here so 13 in total right so the weight of this is 13 this is also targeting the same span but we have a different selector so we have a 10 for the class selector one for the type and then one for the type so that's 12 so this is 12 that's 13 so therefore this selector would win any kind of Battle of conflicts if they were you know styling the same properties differently all right then so let's look at this one bit longer so we have this type selector which is one then this which is one so two then the class so 10 so that's 12 in total 13 14 and then another 10 so 24 okay this one 10 11 12 13 23 and then 24 so they're both the same this is 24 and this is 24 so which selector would win the battle out of these two well it really depends on which one comes last in the Star sheet in that case so if if both selectors have the same weight or specificity then the one further down in the stylesheet would take precedence over the one Higher above okay so this one in this case would win all right so that's just a couple of examples now these examples we've been going over are quite trivial on their own and they can be easily rectified by slightly altering selectors to make them more or less specific but in larger code bases for larger projects where you have multiple large stylesheets perhaps it's not always that simple and it can cause quite a lot of headaches when you're trying to juggle hundreds of different selectors now one of the so-called cures to these headaches would be to follow CSS best practices for example always using single class selectors in your CSS and nothing more that way every selector is of equal weight and only the OD of the selectors in the sty sheet dictates which rules effectively win but that's not always possible because in some cases you might be integrating third part to CSS libraries and you might have no control of how they structure their selectors also a lot of the time we might not have direct access to the template code so can't dictate what elements have what classes and so forth so following so-called best practices doesn't always pull you out of a hole another technique that some people advocate for is doubling up on selectors to add more weight to them when you need to so this means the selector becomes twice as weighty as it was to begin with and therefore twice as specific if you like but this technique can end up escalating the problem rather than solving it the more you reach for it you might also be tempted to throw in a few important statements to override specific rules but this is an anti-pattern in CSS and when we use it without consideration it can make your stylesheets really Mucky and make the problem even worse and before long you'll end up with important statements in every other selector somewhere so if none of these Solutions are really viable options what is the answer to this problem of conflicting rules well this is where Cascade layers can play a really big part and we're going to talk about exactly what they are and how we use them in the next lesson