Introduction to Web Development CSS Specificity Best Practices

Transcript from the "CSS Specificity Best Practices" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: I hesitate to even show you this because it's so bad. I'm gonna show you a really bad idea because you'll probably see it somewhere.
>> Brian Holt: My God everything just went orange, right? But it's from div, like what the hell happened? So, there is this idea of important, that you can throw it on the property and it will override anything, it does not matter how specific it is it'll override it.

[00:00:35] Now, there are even more special things for accounting for what if two importants conflict, but if you have importance conflicting, you have a serious problem with your CSS. So do not use important. I really can't think of very many use cases where you should be using important, what you should do is don't use important.

[00:00:58] And rather, if you need this one with no class to override it, give it another class. Until you have enough classes. Until you can actually override it using specificity, right?
>> Brian Holt: So the reason right here I said don't use a space. If you put a space there then you are implying nesting.

[00:01:25] So for example, let's just come up here and say all of these divs are inside of a class="parent-div".
>> Brian Holt: Okay. Move all these in a little bit. Come on.
>> Brian Holt: Okay? So now all of these divs are nested inside of a parent div, right? What can I actually, this is why you don't style based on divs, right?

[00:02:01] Because now it's like weird looking, but I guess what we can do now, we can say,
>> Brian Holt: I think it is inherit. So it should loose its background-color. And border-color: transparent. And height: auto. So what have I done here? Really bad, right, that I'm writing bad CSS for you right now.

[00:02:47] But-
>> [INAUDIBLE]
>> Brian Holt: So, the issues here is that you should not style divs as just attack, right? You should not give divs height or something like that. That's awful because you can use divs all over your code and you don't wanna have to override it every single time, right?

[00:03:05] Rather, what I should have done is I not should have styled on div and I should have just given them all the same class. But, what I did here is background-color. I told there's you're gonna get, something else is gonna give you a color and I want you to just totally ignore it.

[00:03:19] I want you to get whatever was supposed to be in the first place. That's what inherit means. Border-color, I said you have a border, just make it transparent. So the border actually is there, it's just not being used. And then the highest said I want you to take whatever space that you need to take, that's like the default for height, right?

[00:03:39] I have ten divs inside of me each one of them has a hundred pixels so I should be a thousand pixels right, because I have ten divs that are hundred pixels. It just says size or self accordingly that's the point of a height: auto. So that was a lot of bad CSS, just to teach you that.

[00:03:57] But notice like all the spaces here, anyway. I said all this to say, is like if I wanted to say parent-div, div and I said color.
>> Brian Holt: I don't know. I think cyan's a color. I want background color though.
>> Brian Holt: Have to get rid of that. Okay. So now, no class, also no class, and one class are all getting overridden, but two classes and two classes in id are not being overridden.

[00:04:47] So, this is where we start getting into these weird specificity edge cases. Okay. So, let's go over it. It's overriding no class, right? Because now it has a class, right? I'm referring to the parent class. I don't have to necessarily be referring to its class. It essentially just takes a tally of how specific is this and from there apply these styles to that.

[00:05:16] So right now, there's more specific than div, because there is one class plus one tag, being referred to. So, that's why it's overwriting one class or there's no class. And also no class, because it's referring to a class, right? Now, another or this class is being overwritten. This one class right here because it has one class plus a tag.

[00:05:42] So it has a parent div plus a div that are being referred to. Right? So essentially it has two things now being referred to. Does that mystical, magic make sense? So I'm gonna give you a rule of thumb now, that should work 95% of the time. So just picture it like a, I'm just gonna write up here.

[00:06:09] Like a four digit number, we'll just say three digit number. So the first one is how many IDs does it have referencing it, how many classes does it have referencing it and how many tags does it have referencing it? So for example if I have one that has just one tag referencing it.

[00:06:29] So when I say tag I mean div, p, span, something like that, right? And then it would be 0 0 1, right? That would be like, div, right? But if I have like class this class being referred to it would be 0 1 0 and that would be like this-class.

[00:06:51] Or if I had like this class and another class would be 0 2 0, and that would be this-class.another-class.
>> Brian Holt: So what I'm getting at is 1 0 is bigger than 1, so 1 0 wins, right? So I would need a lot of. It's actually not even that, but it's just kind of a rule of thumb.

[00:07:18] You'd actually need 255 tags to override one class. You need 255 classes to override one ID. But, again, what I'm getting at is if I had this-class-div so, it'd be 011, it'd be this class. Actually, be div.this-class, right? So, it's saying I want this class but only want this classes that are on divs.

[00:07:49] And so that would have 11 specificities, so it would beat 10 specificity. I'm using this mostly as a mnemonic for if you have classes and divs, not that if you have ten tags that it overrides one class, right? That's not what this illustrates. Again, and then if you have one ID.

[00:08:11] It doesn't matter how many classes, how many tags referencing, the ID is always gonna be more specific. And if you have an important, just think of it like this. It's 1000. It just overrides everything. And there's actually even one more on top of that. So, let's go back to our HTML.

[00:08:37] Right here. So you can actually what's called inline styling. So if I say style="background-color".
>> Brian Holt: Pink or something like that. Except let's put that one on the ID just to illustrate it.
>> Brian Holt: So if we go down here notice that now it's pink even though I'm styled based on ID.

[00:09:08] In-line styles even override IDs, but they do not override important. Now, you might be tempted to use inline styles. There is never, not even one, don't even do it. Do not inline your styles. It's just the worst thing you can do for yourself. Because now, I have split my CSS among my HTML file and my CSS, so if I have to go change.

[00:09:34] This was a pink div and I need it to be gray. I don't know if it's in my CSS file, I don't know if it's my HTML file It takes me now forever, to find where's this style coming from? Keep all of your CSS in your CSS files, it should be separate.

[00:09:49] Do not inline your styles.
>> Speaker 2: We've got a few questions keeping up here.
>> Brian Holt: All right.
>> Speaker 2: Do you think you could put a link to this Code Pen out so they could.
>> Brian Holt: Yeah, let me save. Okay, and I will just. Let's see. Where am I? Right there.

[00:10:16] Add new slide.
>> Speaker 3: Is there a way of using the Google Development Tools to look at what styles are being applied to a particular element?
>> Brian Holt: Absolutely. We looked at it but we'll look at it again here in just one second. Let's see. Text.
>> Brian Holt: Yeah, you've gotta make it not black.

[00:10:38] Good job. Black, rem, I don't know, something like that. Yeah. So, it's not pretty but it's on the slides now. It's slide 67. Is that showing up for everybody?
>> Speaker 2: Yep.
>> Brian Holt: Okay.
>> Speaker 2: I think one of them was kind of doing some different things with these. How would I go about making these boxes appear beside each other and then like fixing them to the footer?

[00:11:16]
>> Brian Holt: Fixing them to the footer is a trick. It requires some kind of advanced techniques. So I would say look that one up on your own.
>> Speaker 2: Okay.
>> Brian Holt: We're gonna talk about document flow and floating here in just a sec so that question will be in, I think it's literally in the next set of slides, so we'll talk about that.