6.1 Naming things - Video Tutorials & Practice Problems

<v Instructor 1>As computer scientist</v> Phil Karlton once remarked, "There are only two hard things in computer science: cache and validation, and naming things." We're not gonna talk about what cache and validation means but we are going to talk about naming things because that hard thing applies to front end development as well. Let's take a look at some examples of the kinds of names you might want to avoid. So Lee, the example we have first is a box. We have like the first box and the idea is that calling it in terms of like the class, calling it box1 is bad. Why is that a bad idea? <v Lee>Right, so the idea here</v> is that you wanna name elements with a name that gives you an idea as to what the purpose of the element is on a page. You don't wanna just say box1, box2, box3 because there might come a time later when you come back to this when you have no idea what those boxes do anymore. Box1 doesn't tell you anything about the content that's inside of the box. So we're gonna call these bio-boxes because each one of these boxes is going to contain a biography. And thinking about your name choices with this in mind will really, really help your code be readable. You just don't wanna do things that say XYZ1 or just random names that don't give you any information about it. <v Instructor 1>Right, so here we're going to use bio-box</v> instead as our class. <v Lee>Right.</v> We also have an example here of making sure that the name fits the purpose and not just the appearance. That's also very important. So we talk about if you wanna make something red, don't use a class of red. That's not a great idea. What you really wanna do is say why you're making it red. So reasons for making something red could be like I want it to be an alert, I want it to be very visible. So call it alert, don't call it red. And that's where our first example here comes into play. <v Instructor 1>Right, so let's look</v> at this bottom link here, the final one or actually, I guess it's the bio-box we're going to be classing. Now, recall from our discussion of IDs and classes that you can give multiple classes to an element just by separating them with spaces. So let's look at adding a red class here and then we'll style it up here. .red for red class and then we'll change the color. Is it the background color we're changing? Yeah, just the background. (Lee grunting in agreement) So let's see what that does. There goes the changes. This box to be red. But suppose the purpose of turning it red is to make some sort of alert on the page, to draw the user's attention to this box. And suppose furthermore that we decide instead of using red, we'd rather use purple. Right, that looks fine here, right? The problem though is that the class is still called red. So this is really confusing. What's a better choice here, Lee? What do you suggest? <v Lee>Like I was saying before,</v> if the purpose is to be an alert, then I would call the class alert. <v Instructor 1>Okay, let's try that.</v> So we need to change it here and also down here. Let's save it and see. It should be the same, good. So now we can change it back to red. And in terms of the meaning, it still makes sense while changing the color. <v Lee>Right, this is something</v> that a user's never gonna see but you will see or other people who read your code will see, and there's no better way to become the enemy of a programmer than to hand them a set of code that has things where the background color is purple but it's called red. They will hate your for life. So along the lines of this, making sure that you name things for what they do or what their purpose is, there are strong prescriptive methodologies for naming different elements on your page. Some of these are the block element modifier, object-oriented CSS, and some of these get very complicated with the layout of how the class name works and how you modify things. For this tutorial, we're not gonna do that because it's much more of an advanced topic. But we wanted you to understand that they do exist and you might see some of them out there, and maybe at some point you wanna use them yourself. But for a relatively simple site, you can get away with just simple class names. <v Instructor 1>Again, focusing on the meaning</v> of what the class is supposed to represent, rather than some sort of visual appearance in the browser. <v Lee>Exactly.</v>