This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "IDs and !important" Lesson
[00:00:00]
>> Brian Holt: Now I really wish I could stop here. [LAUGH] This just is getting worse. But you need to know because eventually you're gonna be looking at a code that's terrible, and you're gonna be wondering what's going on. And I want you, one, understand what's going, and two, I want you to shame whoever did it.
[00:00:17] It's a joke, don't shame people, but also, don't do yourself. That's ultimately, that's really what I want you to do. Because if you and I are working the same code base, I'm gonna be very upset with you. [LAUGH] So don't use these. Don't use these, don't use these.
[00:00:34] I'm gonna show you what they do and how, but don't use them. We were talking about, sometimes there is sledgehammers, these are wrecking balls. These are just way too powerful and you are in a different dimension when you start using these and you really just stop and ask yourself, how did I get here, if you end up with using these.
[00:00:57]
>> Brian Holt: So we're going to style by ID. We were talking earlier about IDs and how I don't think they're necessarily a good idea. Styling by ID is yet a worse idea.
>> Brian Holt: So I talked about how you have ones for tags, you have tens for classes, and now you have hundreds for IDs.
[00:01:15] So one ID will overpower 10 classes. Actually 255, if we're gonna be truly honest. It will overpower 200 classes. So don't. So the way you select for an ID is use the pound, and so this site brand, and you can see here, this is a ridiculous selector. It has one tag, and it has three different classes and it's still red because it's using an ID.
[00:01:47] Right, this would be like 100, and this would be 31.
>> Brian Holt: By the way, I don't think I showed you this yet, this is how you do comments in CSS.
>> Brian Holt: It's actually any, you just do a.
>> Brian Holt: /* */ anything between this,
>> Brian Holt: Is a comment, and it can be on a totally different line, so it can be all the way down there.
[00:02:17] You don't have to put the stars here. It's just kind of a convention to make it kind of easy for your eyes to vertically align there. I don't know, it looks nice I suppose.
>> Brian Holt: Questions?
>> Brian Holt: So don't ever stop at ID. Ask questions if anyone tries to submit code to your code base that does.
[00:02:44]
>> Brian Holt: Yeah, just don't, it's a bad idea.
>> Brian Holt: So ID selectors are just way too powerful. It's just not a good idea.
>> Brian Holt: So do you wanna wreck the wrecking ball is the question. So there's one that's even worse than styling by ID, and it's called important. [LAUGH] I wish I had never seen these before, but I saw them all the time and in a one code base I used to work in.
[00:03:18] Okay, so I have site-brand-2 here, right? Let's see if I make this even less. Let's just make this in h1.
>> Brian Holt: So this has nothing in it, right? This has one specificity. This has 100 specificity. And I have here, Brand of my Website, what color is this gonna be?
[00:03:39]
>> Brian Holt: Green, right? Because here important overrides even, so this is like the thousands place, right? This will override IDs, which is just a giant problem. [LAUGH]
>> Speaker 2: Is that in every browser too?
>> Brian Holt: Mm-hm, yeah no it's quite old, so it's been around for some time. Yeah?
>> Speaker 3: Was it necessary where you worked and if so why?
[00:04:06]
>> Brian Holt: Was it necessary? Absolutely not, no way. [LAUGH] It's lazy developers. So let me explain to you how these problems like unravel. Someone makes a CSS class and they write something and they select it. And then sometime, three months later, someone has to go over and design decided to change something from red to green.
[00:04:25] And they don't want to go figure out where it was originally written, so they just write a new CSS class and they make it more specific. So they had two classes, then later someone adds three classes, someone adds four classes, someone adds four classes and a tag. Someone is like, nope screw it, I'm just gonna do an ID, and then throw an ID on it.
[00:04:41] And so it's just like this rats nest and gets more and more tangled and someone's like it's important now. [LAUGH] So it's just this ridiculousness and if you ever try to like unravel it and make the code look better, because at that point your codes impossible to understand where's what's coming from where.
[00:05:02] Yeah, it's impossible, it's just impossible to deal with. So no, it wasn't necessary at all. Does that answer your question?
>> Speaker 2: Mm-hm.
>> Brian Holt: Cool, yeah.
>> Speaker 2: So for all these IDs and important, the cascade still applies? That if you have two importants on something,
>> Brian Holt: Yep.
>> Speaker 2: The bottom one or two IDs on something, the bottom one, or the one closest will override.
[00:05:30]
>> Brian Holt: [LAUGH]
>> Speaker 2: There is a way to do two importants, I forgot what it is.
>> Brian Holt: Anyway, you can get into some weird stuff, yes.
>> Brian Holt: Remember how some things can only have one ID. So let's just get rid of that for a second. Let's say I wanted to make this even more.
[00:06:02] We'll just get rid of that for a second.
>> Brian Holt: What you could do is you can do. There's nothing stopping you from repeating yourself. So you can say site-brand-2, and then up here I can say site-brand-2. So you can actually repeat yourself. But now it's become more specific, right?
[00:06:24] Or you can get even like more weird and you can actually combine with the class and say nav-head-2.
>> Brian Holt: So now it's more specific cuz it has both a class and ID, right? So you can see this is kind of a game you can play but you really, really don't want to.
[00:06:42] If you combine an ID selector with class or with anything else ever, just burn the code base to the ground. Just delete it and quit your job. No, I'm just kidding. Yeah you have serious problems when you're combining IDs with anything else. That's when you know stuff has seriously hit the fan.
[00:07:06]
>> Brian Holt: Okay, now that I've shown you all the stuff, I hope you never see it again. I bless you that you never have to see these things again. Any questions?
>> Brian Holt: Please.
>> Speaker 3: Are there any add-ons, or I guess you'd call them plugins that tracks where stuff is coming from?
[00:07:27] So that developers can find where the end of the string is?
>> Brian Holt: The Dev tools are actually really quite good at pointing to where things came from, so this is actually not gonna be super useful, maybe it will be. Let's take a look at my header here for the website.
[00:07:45] So if I Inspect Element, which is gonna put me back in my developer tools. So you can see here that I have a nav bar. The nav bar class, it's pointing at this coming from in line. But that's how my website was built. If I click on it, it'll actually take me to the style sheet, where I was actually defined.
[00:08:09] So you don't actually really even need any additional tools. Your developer tools are actually quicker to do it now.
>> Speaker 3: Okay, it's more confusing why there would be lazy developers in the first place if they can't find where it starts.
>> Brian Holt: Yes, I like where your head's at.
[00:08:32] [LAUGH] Absolutely, the first thing I would say is developer tools haven't always been this good. That's maybe the past three to four years, they've gotten really, really good. And even maybe the past two years when they've gotten phenomenal. Specifically, Chrome and Firefox have just taken huge bounds, it's really, really great developer tools.
[00:08:50] I mean, back in the day when we were using old Firebug which is what Firefox dev tools used to be, it didn't really tell you some of things like this. And then beyond that, people are still just lazy. [LAUGH] A lot of people don't invest the time to learn the developer tools and learn their tooling really, really well.
[00:09:12] I would bet you there's some people that don't even know that you can do that, and you could click through to see that. So it is worth the time to invest into your tools and to learn how your browser works. Learn how to do your developer tools. In fact, there's a great Frontend Masters course by Jon Kuperman on the Chrome developer tools.
[00:09:30] So that's worth doing as well.
>> Brian Holt: But I don't know, I don't know why people do that. [LAUGH] I'd like to say that I've never done it, but I've definitely done it. I mean, it's one of those things that I was working at a place that, obviously, no one cared.
[00:09:46] Because everyone else was doing it. And it was like, I don't have time to clean up everyone else's mess, so I'm just gonna pile onto it.
>> Brian Holt: It's like if you're in a crowd of people and they won't stop a crime going on. Like there's somebody will to blame anyone else, and everyone does that to everyone else.
[00:10:07] And there's some name for that phenomenon that I can't remember what it is. The fusion of responsibility, that's what it is. People are lazy. People, I am lazy, that's true.