CSS Cascade

[00:00:00]
>> The cascade is gonna cause you so many, just heartaches and problems and all sorts of things like that. And it can be really useful sometimes, and it can be a big old pain in the butt sometimes. Something that I've been doing and I haven't really been talking about, most of the time, you don't wanna style directly in a style tag.

[00:00:24]
I'm just showing that to you here so that you can see the HTML and the CSS literally right next to each other. Typically, you wanna do it like we saw it in CodePen, where there's separate files. You have style.css and index.HTML, and your HTML file will link to the style sheet.

[00:00:41]
You technically can't put style tags directly in there and then put little bits of CSS in there, don't do that, almost never do that. It's useful for this particular exercise so that you can see these right next to each other, but that's just for learning, don't do that in your projects.

[00:00:56]
Okay, when we get to the project, I'll really help you see that more concretely. Okay, So let's talk about the cascade. What happens when you have two rules that conflict with each other, which one wins? It depends. So this is called the cascade, that's why it's cascading style sheets.

[00:01:25]
It defines a bunch of rules, of like if two things conflict, which one wins? So if you were just looking at this, I have one h1 here, and I have two rules that have the same selector, .title and .title, what color would you expect cool title to be?

[00:01:45]
>> I'm thinking the red.
>> First one, Rustin.
>> It's a super valid intuition to have, it's the other way though. [LAUGH]
>> The one.
>> [LAUGH]
>> But I can totally see where you're coming from, it's the last one to find, the lowest down one on whatever you are.

[00:02:02]
So if you load five style sheets, right, cuz you can load multiple CSS files, it'll be the last one that wins, so green, right? If they have the same specificity, that's a term that you'll hear thrown around. If they're the same specificity, it'll just be the last one that defines it wins.

[00:02:21]
So, Even if it's like this, right, where both of them are the same thing, right, they're both classes, right, it'll just go with the lower one. And by all means, if I copy and paste that one underneath here, notice that now it's red. So it's just the lowest one on the page.

[00:02:49]
So, I think that makes sense, if they're the same specificity, the lower one makes sense or is the one that wins. Maybe even to just drive it home a little bit further. Right, so now there's three of them that are all the same specificity. It doesn't matter, Okay?

[00:03:17]
Now, let's look at this one. Look, I literally taught you that in the next thing, so even if they're different, it doesn't matter, it's still the last one wins, right? So green one here. One thing to note though is it's not like it's on a property by property basis, right?

[00:03:35]
So notice main-brand-2 here has something else, and it's not overwritten in the second one. This is gonna apply, right, because nothing overrode it. So it does have this black border here that I got from that first class, right? So it's gonna merge these things together, rather than having one winning rule, which is a useful thing, right?

[00:03:54]
Imagine if I had a light theme and a dark theme for everything, right? If it has the dark theme button, only override parts of the colors and everything like that, but the border, the size, the positioning, all that stuff stays the same, we don't need to override it.

[00:04:07]
So just by adding that little bit, we can kind of bring it along for the ride. Does that make sense? All right, so now imagine that we have this, title and main-brand, we just have two classes, right? This one has .main-brand-3.title.3, so it has two classes together, right, and I have title-3 here with just one class.

[00:04:39]
Which one is more specific? It's the first one, cuz it has two classes, right? So this is gonna end up being red because this is more specific, Right? And you can literally just count how many class names there are, right? You can even repeat it, right? So if I actually come in here and say, .title-3 again, right, I just repeated the same class, CSS doesn't care, right?

[00:05:08]
Now, they're both two specificity, right, so whatever the one is last on the page wins. But if it only has one, This is more specific, the selector is more specific. And what if I had a p here? The class = title-3, some text. Some text is green. I feel like I'm choosing the worst colors, if you're colorblind, I'm very sorry about that, that is not intentional.

[00:05:55]
This one ends up being blue, right, because it doesn't match this one, right, cuz it doesn't have this main-brand-3 class, right? It just has title-3, so it ends up being blue. So keep in mind, all of the selectors have to match. Does that makes sense? Okay, how about this one?

[00:06:30]
I'm trying to set you up to fail here, I'm doing that on purpose, I'm trying to subvert expectations. You have an h1, and you say, all h1s will be colored green, right? And you have a title-4 class here, which is another h1, so which one is more specific in this case?

[00:06:53]
>> Title four.
>> Title four, because classes are more specific than tags. An imperfect way of thinking about it is thinking about the classes is in the tens place and the tags are in the zero place, right, or the one's place, right? So, if I have five tag selectors, which is actually technically not possible, but don't think about that too much for a second, or I have one class, right?

[00:07:30]
Obviously, the 10 is bigger than the 5. Now, it's imperfect because even if you have 254 tag selectors and one class, the class is still more specific. Basically, if you have a class selector, it's always more specific than a tag selector. So classes are always more specific than tags, that's the takeaway there.

[00:08:02]
So the class selector will overpower a tag selector, it's more specific. This is why I'm telling you to do everything in classes so that it's more obvious how the cascade's gonna happen, because once you start getting into niche use cases, it becomes really strange of which one's gonna win.

[00:08:23]
So, here's a fun one for you, what color is this h1 gonna be? It's gonna be orange, It has two classes, so you can think of that being 20, right, in my shorthand. This has a tag and a class, so it'd be 11, and this has one class, so it'd be 10.

[00:08:56]
So that's why this is orange. If I delete this one, which one do you think it's gonna be?
>> Red.
>> Red, right, cuz it's a little bit more specific, cuz it has the tag selector in there as well. Cool, good job. This is almost all of the CSS I want you to do, is selecting very rarely, sometimes by tag.

[00:09:30]
And again, in that specific case, where you want literally all of them on your website style that way, and then all the rest of time doing classes. And for the most part, if you can stick to one class, that's ideal. Sometimes a second kind of utility, sometimes maybe a third utility.

[00:09:44]
If you're going beyond three classes, you're getting a little too crazy for my taste, and I think you should kinda tone it down to one to three, preferably one, because it keeps your CSS very straightforward. If you start relying on the cascade for lots of stuff, down the road, your CSS is gonna end up being just bonkers.

[00:10:07]
And let me tell you specifically, having worked at LinkedIn, which had a two megabyte style sheet, which is enormous by the way. Most stylesheet should be what? 20 kilobytes, I feel like that's a big stylesheet. What is it on this website? And now I'm afraid to look, but let's just go look at how big my stylesheet is.

[00:10:33]
I'm there, CSS. 25, okay, and I'm including some other stuff in there that's less important. So this entire website is 25 kilobytes. LinkedIn's was two megabytes, which is absolutely bonkers, right? It caused the site to be super slow, we had a hard time deleting anything because we delete one piece of the CSS and it would cause weird cascades into the rest of our code.

[00:11:04]
Keeping very simple and straightforward CSS is difficult and requires discipline, right, cuz you can see there's a ton of flexibility in the system. And so if you abuse it, it's going to abuse you later. So that's my advice, keep your selectors simple, rely on the cascade as little as possible.

[00:11:25]
Sometimes you end up just having to copy and paste some of your styles sometimes, that ends up being okay sometimes. Okay, why do I say all of this to you right now? I'm about to show you, I've shown you how to use hammer and nails, I'm gonna show you how to use wrecking balls with CSS that I hope you never use, but you need to know them.