6.2 When and why - Video Tutorials & Practice Problems

<v Speaker 1>In addition to having to come up</v> with a particular name for a class or ID. We also have to decide whether we wanna use a class or an ID for the particular styling choice. And this is something we alluded to briefly before, but now we're gonna dig into more of the details. And in particular, before we added in an ID just to kind of show you how to do it. But in fact, we have a different philosophy on use of IDs. Which is possibly holy war territory. What's the rule Lee? <v Lee>You should only use IDs when you absolutely have to.</v> And for example, if you're using JavaScript use an ID and then use them only for JavaScript. Otherwise you should be using classes. <v Speaker 1>Right. So pretty much anytime</v> you're styling something you should be using classes and possibly multiple classes, but you should generally try to avoid IDs for styling if you can. So let's take a look at one of the reasons why that is. In the last section we added this alert class to the final bio box here. Suppose we wanted to add it to this first one as well. You can see it's got the ID for executive bio. So you think this would change it right? But it didn't, what happened there? So what did happen there Lee? This is a, this is the kind of thing I didn't really know much about before this tutorial. <v Lee>All right.</v> So go back to the, go back to the, the code. <v Speaker 1>Yeah.</v> <v Lee>So the problem here</v> and we've mentioned this word before, but is specificity. <v Speaker 1>Yeah.</v> <v Lee>And an ID has a much higher specificity</v> than a class or even a set of classes. So exec bio is overriding alert and this is why you don't want to use IDs. Because what'll happen is you add a style using an ID to something and maybe it's just a single style and you forget about it. And then later you do some other styling using classes and you're sitting there looking at the page and you're like, I just made the change. Why isn't this having an effect? <v Speaker 1>Right.</v> <v Lee>And then you can't figure it out.</v> And then you realize, oh it's because of this ID or worse than that is something that cascades down. So you get like a little bit of a margin on something or like the size is a little bit off and you can't figure it out, and then you realize that, oh it's because this ID is passing this class down. So it's just best practices to try and stay away from IDs as much as possible. That said, they're also a valuable tool. If you do have to, for some situation or another inject some styling at a very high specificity. You can put an ID on it and then directly target that. And for a simple page, like we're doing that's not really gonna come up, but for a very complex web application where you can sometimes have elements inside of elements, inside of elements and have nested layers of potential conflicts with within the styling. You can use an ID, but still you shouldn't get to that point. That's the whole idea behind writing clean and simple CSS is that you don't want to be at that point. <v Speaker 1>So if we actually wanted this to apply,</v> we would have to do something like this. We'd have to put a separate rule with an alert. <v Lee>Right? Like right by.</v> <v Speaker 1>Combine the two together</v> <v Lee>Yeah, Right.</v> <v Speaker 1>And then do this</v> <v Lee>And now you've defeated.</v> You, you've actually made something that is more specific than just the ID alone. <v Speaker 1>Right.</v> Yeah, We're repeating ourselves here a little bit. <v Lee>Right.</v> <v Speaker 1>Using the background red.</v> And this is just confusing. It's the kind of thing that once you go down this road you have to keep doing it in lot places. <v Lee>Exactly. And that's why,</v> that's why you want to have some of these ideas in mind when you're starting. Because if you make mistakes early on like this and you use an ID, you'll find yourself, undoing work a lot and repeating yourself. And that's never a good idea. <v Speaker 1>Right. So what we really don't wanna do</v> in this case is just get rid of this rule and probably just get rid of, just get rid of this. Oh, I guess so what we would really wanna do is have a separate class, just, indicating something that was light gray. <v Lee>Correct. That would be the best way to deal with it.</v> <v Speaker 1>All right. We'll leave these rules in for now</v> but we will be removing them by the end of the chapter.