This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Naming and Semantics" Lesson
[00:00:00]
>> Brian Holt: Okay, so let's talk about naming a little bit. There's a stupid computer science joke that it's probably not the first time you're gonna hear it and definitely will not be the last. There's two things that are hard in computer science, cache invalidation, naming things, and off-by-one errors.
[00:00:19] We're not talking about cache invalidation, cuz that is actually quite hard, but we as developers, computer scientists, engineers, the stuff that we're doing now, we name things all the time, constantly. 75% of your job is just naming variables, naming classes, naming IDs, naming tags that kind of stuff we just name things constantly.
[00:00:44] So it's tough to name things correctly and it's always kind of a stuggle, but it's worth taking time pausing. Thinking about a good name for something. And then if the semantic meaning changes of whatever you named, going back and actually change the name to reflect whatever it means now.
[00:01:03] Keeping names useful and up to date is worth the time investment.
>> Brian Holt: Yeah, we are definitely not talking about cache invalidation. Naming things is hard. And if you feel like it's hard, it's because it's hard. [LAUGH] So that's accurate. With classes, you want to name things semantically. I've said this word three or four times, and you're going to hear it a lot, particularly with HTML and CSS.
[00:01:33] You wanna name things after what they do, and not what they look like. And that's what I mean when I say name it semantically. Don't name it what it looks like, name it what it does. Let's dissect that. Let's take some examples.
>> Brian Holt: So if I had this blog post right here, right?
[00:01:54] My Cool Blog Post, and I was trying to name this part of it, right? This title, what would I call it? There is a huge temptation to name that red title because if you look at that, right away you look at that and it's like, that's red title, right?
[00:02:10] And it's really obvious up front. And for a while, or when you write it, it makes sense to call that red title. However, inevitably in the future if you ever work with designers they want to change everything all the time. [LAUGH] And I'm not pointing fingers, but it's definitely designer's faults.
[00:02:27] [LAUGH] Hopefully designers are not listening to this. I'm kidding, it's everyone's fault. But this always inevitably happens where they come back with like, yeah, we're changing the branding, or we're changing something, or it's a Tuesday, so you should change this. I don't know, for whatever dumb reasons, we like changing things all the time.
[00:02:45] And so later, we come back and we call it, and now it's green. However, there's a problem now that the class name for this is red-title, right? So now it's actually not even really describing what it is. That sucks. [LAUGH] Because you're going to go through your CSS, and you're just like, red-title.
[00:03:10] And then you go look for it on the page, you're like, there's no red-titles on this. Where did this come from, right? And so it actually makes your job harder, because you're gonna read something and it doesn't mean what it reads. And when you have to kinda do that investigation to see something, understand it doesn't work, and then understand why it doesn't work, that's four more steps that you have to do before you actually understand how the system works, and that's bad.
[00:03:34] What I'm constantly telling you is you need to optimize for your future self and your future co-workers. So you wanna do something that's going to stick. And the less that you have to rename things the better. Because what happens if I'm using this everywhere, right? What happens if I have a thousand different instances of red title and I have to go back and rename all those?
[00:03:55] No, I'm not doing that, right? It'd be much better if we just called it something that worked in both cases, right? So rather than naming it what it looks like, we should name it about what it does. So what we should call it, something like post title. Blog post title.
[00:04:12] Blog title. Something like that, because if it changes from red to green, it still describes what it does. It's still a blog post title. So does that make sense?
>> Brian Holt: It's worth taking time thinking about it, don't call what it looks like, don't call it bold title, don't call it capitalized title.
[00:04:35] I guarantee it, that whenever you call something like that it's gonna change to be something else. It just always happens like that, you will definitely get burned by this. You'll still gonna get burned by it anyway, because we're constantly burning ourselves as developers. But I'm trying to help you have less fire starter moments I suppose.
[00:05:01]
>> Brian Holt: Here I have another shout out to make sure that you're choosing the right tags as well. If something is an article call it an article. If you have a section of your website name it section, or if it's a nav, you should call it a nav. Those sorts of things.
[00:05:21]
>> Brian Holt: So don't call it red-title, call it blog-post-title or post-head or something like that. Describe what it is and not what it looks like.
>> Brian Holt: Any questions so far about any of that? Please.
>> Student: Is it fair to say that naming convention for something like this is going to be a stylistic sort of thing would maybe have hyphens over camel case?
[00:05:51]
>> Brian Holt: It's a good question. Notice here that I'm saying red-tile, right? He's asking, this is called kebab case, in case you're wondering. I did not make it up. [LAUGH] That is actually what it's called. It looks like there's a skewer through it, yeah? Yeah, CSS is always done as kebab case, that's by convention.
[00:06:14] And one of the reasons that that's a convention and it's not camel case, camel case is like where the first letter is lowercase and then every word after that is capitalized and it's all shoved together. Let's see if I can kinda just quickly show you what that means.
[00:06:29] So if I made this like, thisIsCamelCase. Like that, right? Where it's all shoved together. That's called camel case, right? So the reason that CSS is kebab case is cuz HTML in general is not case sensitive. So whether something is upper case or lower case everything is actually, in the end, gets made lower case in HTML.
[00:06:58] So camel case is ultimately meaningless, because it loses all that information once it gets put into the browser. So in order to maintain the separation and readability of everything, rather than making this camel case, this-is-kebab-case. They do it like this for CSS to make it readable even when it's still put into the browser.
[00:07:21] Does that make sense? Cool.
>> Brian Holt: Here's a bunch of different cases, I think, anyway, I won't show you all of them. Some of them are ridiculous. My favorite Spongebob cases is when you alternate from lowercase to uppercase, I was told that Spongebob case.
>> Student2: I thought that was just a meme thing.
[00:07:47]
>> Brian Holt: I think that's why it got named that. [LAUGH]
>> multiple: [LAUGH]
>> Brian Holt: It is a meme thing.
>> Student2: Yeah.