IDs & !important

[00:00:00]
>> We've style by classes, we've styled by tags, let's go style by ID. Do you remember how I told you don't use IDs very often this is part of the reason why I don't want you to. Okay, so let's say I have an h1 here of site brand, and I gave it a bunch of classes, right?

[00:00:21]
Nav-head nav-main other-useful-class and I have two selectors here site-brand, and this just incredibly specific selector, h1, nav-head, nav-main other-useful-class. Let's put another nav-head in there for fun it's infinite, right? So many classes, which of these two is more specific?
>> ID
>> The ID, right? So if classes are in the 10 places then IDs are in the 100 place, right?

[00:00:54]
So this is red so this is why I don't want you to use IDs very much it's like they're sledgehammer they just blowing all the classes and end up overriding a lot of things. And imagine later if you're trying to cascade on top of that, you end up in these wild situations where you have each one side-brand, right?

[00:01:19]
Color blue. So yeah that works right, but then what you have to be on top of that? Well then you can be like, Sorry my spacing here is a little off. So I mean all of these things, right? Apply but if you're looking at someone's style sheet, which of these applies?

[00:01:52]
It's hard to tell, right? At a glance you kind of go through and do the math. No ain't nobody wanna do some math, right? We just wanna know what applies. And if you look at this in the inspector it's gonna be a hot mess to look at. So look at all these crossed out colors here, they're like nope this one.

[00:02:17]
Yeah, it's ridiculous. And by the way if your CSS selectors looked like this, I don't know quit your job I would be so upset. Furthermore, the problem typically is not that they're lined out this. Even when they're lined out like this it's hard to tell. Typically they're in six different files and you don't know where they are, right?

[00:02:42]
And then you have to hunt through multiple files looking for this one selector that's clobbering all of URLs so frustrating. I'm saying this hopefully to save you select future hell, right? Cuz it's not fun. Okay. So site-brand 2, what color is site brand? This important if IDs are in the 100 place important is in the 1000s place.

[00:03:21]
Never use important if you're using important, you're doing something absolutely wrong. The person that invented important regrets it [LAUGH] The reason why they invented important is cuz they thought that it would be useful for compliance. So, some people have to adhere to certain government accessibility, compliance, things like that and they were worried that the government would sue people if they had a too small.

[00:03:48]
So they had to have this important so that could never be overridden, ended up not being really that big of a deal because the government ruled on in an accessibility case. That if a user makes it smaller it's not in compliance the user chose that but they were worried about that when they drafted the standard or it's somewhat similar to that, that was my understanding.

[00:04:09]
So once you start getting into weird stuff like this, then you will start seeing, Important important was it like this I don't know there some world things they can do or, that what it is, right? Now that this are both important it cast down to some selective, right?

[00:04:38]
Which if you see something that's important to not being implied, you are in a special kind of hell, right? Because there's nothing above important well actually there is something [LAUGH] above important and that's inline style. No I don't think that even inline style I think important is the most one.

[00:04:56]
Now I'm getting into the edge of my knowledge color pink. Yeah, so that's what this is important will even blow up blow away inline styles. So if I get rid of both of these importance, Inline styles so I put my style here actually does out cascade IDs. But imagine that you're trying to write your CSS, you use a ID selector and it's not even applying then, it's confusing, right?

[00:05:31]
So, I'm trying to show you all of this confusion up front so that you're like I don't wanna do anything with that I'm just gonna use classes, right? If that's what you're feeling right now, I have succeeded, I am a great teacher, I pat myself on the back and you're gonna go forth well equipped to be great developers.

[00:05:48]
This took me years of being an idiot to figure out that's why I'm trying to show you how to not be an idiot, cuz nobody taught me this way, right? I just read in the book I was like IDs selectors that just does everything I wanna do and I just did it, right?

[00:06:01]
So, don't be like Brian well don't be like past Brian maybe enough current Brian either I don't know that's up to you but definitely don't be past Brian nobody likes that guy. Okay, any questions about the cascade? I've more or less showing you the entire cascade hierarchy, yeah.

[00:06:23]
>> Is there a way to bring in something to prioritize the CSS styles you made like a JavaScript that's do this first?
>> That's a great question. So, if you're not from this Twitter Bootstrap or there's a myriad of other of CSS frameworks, right? Or CSS toolkit of if someone went and made a bunch of really useful pre-made styles for you.

[00:06:50]
So let's let's just look at Twitter Bootstrap. Look at components here, right? So for these really nice looking buttons, right? This is all just CSS, right? Or there's large button and small button and all these kinds of things, a good question is if I bring all these toolkits and sometimes I still have to write CSS on top.

[00:07:19]
I almost always have to write some CSS on top of that and it can get really frustrating trying to balance what Twitter's including for this is made by Twitter. So what Bootstrap is including for me, versus what I'm trying to write. So the first thing is always load your CSS last, right?

[00:07:40]
Cuz if you remember all of your CSS the last one wins if they have equal specificity, so that'll help. Beyond that you just have to end up being more specific than Bootstrap, right? So if you have a selector that's like, Nav let's say one of theirs is like button, Or let's do it this way.

[00:08:08]
Button class = btn btn large or something like that. Right, so I make this button the built in stylesheet to bootstrap will have .btn .btn large. And if you're trying to override something even more than that you'll have to have something with at least two classes, right?
>> Okay.

[00:08:40]
>> Cuz you have to out cascade it, which is not fun, right? It's generally why I tell you avoid cascading things because then it gets really messy. Unfortunately in this case you just kinda have to get in there and get messy with it. So your CSS selector will end up looking like .btn.

[00:09:01]
What I'll probably advise you to do is add some class of your own, and just say my btn, right? And then you'll do, Your stuff here, by the side you do comments /* */, it's different in CSS than it is in HTML. As long as this comes after, you'll out cascade it, right, cuz it's last.

[00:09:30]
That's generally what I advise you to do. If you have to out cascaded again you'll either have to add something like that be large. In general I'll just repeat my class again. Just so this ends up being more heavy. And if you're doing beyond three you need to ask yourself some questions of can I rearchitect this so I don't have to do so much cascading?

[00:09:57]
Does that answer your question?
>> Yeah, so it would have to be in the same style sheet then.
>> It does not matter which style sheet it comes from, cuz they're all equally applied. So, I would include and I'll show you how to include stylesheets here in a little bit.

[00:10:13]
But I will include bootstrap first and then underneath that I'll include my styles, right?
>> Like when you're listening in the head?
>> Exactly.
>> That's where it comes last okay I got it.
>> Yeah, sorry I should have been more specific it's a terrible joke. I am a dad now I get to make dad jokes.

[00:10:30]
So legally I can make dad jokes. I hate that joke we probably should cut that it's terrible [LAUGH] I'm kidding you can leave it in there. Cool, other questions? Okay, avoid the cascade it's a tool to be used sparingly, that's the point.