Organizing & Naming Styles

[00:00:00]
>> Kevin Powell: And we haven't written a ton of CSS, but we have written a fair amount, and there's been a few times I've refactored things, we've sort of gone up and down. I've been putting some classes at the bottom, then moving back up to do other styles, and I think it's important that we talk a little bit about staying organized and naming things because you generally have one big CSS file which can have a lot of stuff in it.

[00:00:22]
With modern CSS there is at layer that you can use as one way to help you stay more organized. It's a little bit more advanced. I don't want to get into it necessarily in this course, just because it adds this extra layer of complexity to how you're organizing your style sheets, and you don't need it, especially for smaller things like this. It is a useful feature. I'd encourage you to look into it as you continue to explore in CSS.

[00:00:47]
But as a general rule of thumb, keeping things simple, I would say start all of your CSS files with very generic general styling, starting with the body selector. Well, first your custom properties, then you can get into your body selector where you're doing the most generic things you can. So if we take a look at our project, we've done that. Let's set up as many base styles as we can here and rely on inheritance, so all of these styles are going through and I don't have to keep repeating any declarations.

[00:01:16]
Then we get a little bit more specific. We want to change a couple of things, so I come in with a few things, the color needs to change on my headings, the font-weight, a few sizes that we're setting up through there, my colors on my links, as generic as we can, just setting again these global styles that will get reused over and over and over again. And then we start running into slightly more specific situations.

[00:01:39]
Oh, my button actually needs to look different. Maybe I want it to work for links and for buttons, so I have a class now that's pinpointing something. This button could be anywhere on my site, could be in the hero, could be somewhere else. It's this reusable component type thing, so I'm just going to keep it around somewhere that I can just know I can plug and play. The lead, same idea, something I can plug and play, doesn't have to be right after my hero.

[00:02:01]
It could be in other places or it would have been in my hero. Then we get into more specific things from there. So it's like general coming down, reusable things, and then I get to, OK, this section of my website is just completely different from anything else. This is going to be at the top of the home page and maybe nowhere else, or the top of every page. But I'm not reusing this anywhere else. So then I just come in with a name, I style it, I do what I need to do on there, and then there's inner pieces of that, so we make sure it's obvious that they belong together, and I sort of keep going narrower and narrower.

[00:02:36]
I get to my footer, the middle section, which is kind of awkward, we'll talk about that as well. So that's general organization, how I try and do it. There's also utility classes that you can have. You might have something that's making things bigger or smaller, just doing like one job, one job only. You can also include some of those. I'd probably have those at the bottom, just so if order ever does come in, if I'm using a utility class, I probably want it to win, so I tend to have my utilities down at the bottom.

[00:03:05]
The layout and the components, you can sort of mix and match whatever order they do come in. Naming things is also hard though. The middle section that I just talked about, which is a terrible name. This is a quote that goes around the internet a lot, which is there are only two hard things in computer science, cache invalidation and naming things, by Phil Colton there. And luckily in CSS we don't have to worry about cache invalidation, but naming things is like the one thing that we're doing constantly and sadly it's one of the hardest things to do.

[00:03:34]
It can seem easy at first when you're naming classes because you just call, especially on smaller websites, you're just naming the thing, whatever, and the more CSS you write, the more you start to realize it gets harder and harder. My main suggestion is to keep things generic yet descriptive, which sounds counterintuitive a little bit, but a little bit like when we were naming our custom properties, calling it an accent-color instead of a gold color.

[00:04:01]
So we're saying what it's doing without saying that it's this specific color as an example. The other thing is I would suggest trying to separate concerns as much as possible between, if you have a class that has like 20 different declarations on it. It's possible they're all just doing that one thing to style that one block of content. But it's also possible that you're doing multiple different things in there all at the same time that could be useful if they were separated.

[00:04:28]
So, and yeah, it's a red flag when I see a lot. Again, there are some things you just need a ton of declarations, it's OK. But if it's doing multiple things, then you want to just keep an eye out for it. Avoid things, when I was teaching in the classroom, my students loved this, and I got very upset with them all the time. Box 1, box 2, box 3, section 1, section 2, section 3, anything like that. Just try coming in with slightly more things that give a bit of awareness of what those boxes actually are and keep an eye out for repeated code.

[00:05:01]
This is a little bit what happens if you have what I was just talking about where you might have a lot of like a really big code block. That's the red flag, and then if you're doing the same thing somewhere else that's in that really big code block, that's where the alarm bells should start ringing. So we did that. I have my middle and my footer content here that are setting things up like this. I'm sure people that are watching this have done things where it's sort of like, is Kevin really telling us to write CSS this way?

[00:05:30]
Here I have the same thing happening over on my hero content as well. Yeah, on the hero content as well, and this is one of those things where if I need to start repeating something that's happening in multiple different places, and I'm having trouble coming up with names for it, like middle is a terrible name because if I add more content, it probably won't be in the middle anymore. Those types of things are like, OK, what can I do to make this more generic?

[00:05:54]
The only reason I gave the middle a class was to hold the content. So, instead of calling it middle, I probably should have thought of, can I call this something that's going to hold my content in the middle. There is a very common name for this, and there's a slightly less common name. The most common name used is a container. And the second most common name is a wrapper, both to essentially accomplish the same thing.

[00:06:24]
I tend to use wrapper. I used to be the biggest, I use container for everything. This name was used in Bootstrap back in the day. If you don't know it, don't worry about it. A framework that was very popular still sticks around these days. I think that might be why it was as popular as it was. The problem is now in CSS we have container queries, and we have to define containers when we're using a container query.

[00:06:48]
And to me it's weird if I have a class of container that has nothing to do with a container query. So for that reason alone, I now call them wrappers, just so that there's no weird confusion that can come up between what that container is actually doing. My wrappers usually do exactly what you see here. They have a padding to stop stuff from touching the edges of the pages. They have a maximum size to wrap my content, hold it in the middle of the page, and a margin inline to center it.

[00:07:20]
And if I have a wrapper single class here that's doing all of that, then I don't need to do that right here because I have a wrapper now that can accomplish the exact same thing. So let's come over here and fix this up a little bit. We'll start at the bottom where it's easiest. I had my footer, footer content, hey, I don't really need footer content anymore. All of this was for was to wrap the content.

[00:07:42]
So that's my wrapper. It's holding the content, we can see the line break is happening here. I can do the same thing over my middle. My middle doesn't make sense anymore. I can make this a wrapper and hold my content in the middle. Works perfectly, and then I can bring it up over here and use it there and we can turn off our image at the same time since we don't need that image. So I will comment out that image.