**Transcript of the video above for reference** If you prefer to read a short post on the topic of classes, you can do so here.

Hello everyone, this is Casey from CL Creative where I'm teaching you Webflow and web design one video at a time here on YouTube. Today, we're going to delve into the concept of classes.

What Are Classes?

First, let's define what exactly is a class. A class is simply a name that is given to an HTML element that allows us to select that HTML element and apply some CSS styles. If you look at the left sidebar, here's our Navigator. These are all of our HTML elements as well as the names that have been applied or the classes that have been applied to those elements.

On the right here, we have our CSS panel and up top here is where we actually apply and select, apply the names to the elements and select those elements with those names by searching them up here in the style panel.

Power of Classes

Let me show you the power of doing that. If I was just to put another div block on the page and I gave it the same exact name as this top one, section home header, watch what happens. If you notice, all of the different Styles have been applied to this div block. It has a background image, it has a gradient that's been applied to it, the same display property, same everything is exactly the same, a height of 100 VH.

All of those are associated with that particular name which then really comes to why do we use these Styles or why do we use classes. It allows us to build much faster which is saving us time as well as it allows us to be consistent with our builds.

Applying Classes

Now, let me show you what I mean here. I use Finsweet's Client First system and that's what's going to be reflected on this website. One of the things that you're going to notice is I have section, I have section here home header, these are the naming convention.

But the next thing that I really want to bring your attention to here is padding page global. There's page Global here, container large, container large here, padding section extra large, padding section extra large. Now these are the spacing styles that are going to be applied to almost every single section on the website.

Consistency through Classes

What that allows us to do is, if you look in page Global, really page Global, the only styles that are applied to page Global are padding, so two and a half rim on the left and two and a half rim on the right. What that allows me to do is really to maintain consistency throughout the website.

So if I have this same div applied and put within every single section on the website, all of a sudden every single section as you scroll down is going to have the exact same amount of padding between this HTML element here and the side of the page. It makes things very nice, very consistent but it also makes the build go very, very fast.

Easy Updates with Classes

It also allows for easy updates. So, say my client comes to me and they say, you know I really like what you've done but one of the things that I don't like is that there's not enough space in between each of these sections. Well, I have a class for that and so all I have to do is go in and say I want to add more space so I can go in and apply 8 rem on the top and 8 rem on the bottom.

Every single one of these sections that have that same class applied to it, which is all of these sections on this page, have changed so that there's 8 rem and 8 rem throughout. So, if I go back and I change that back, then all the different sections on the page are going to change back to 6 rem

The Importance of Naming Classes

Reflect that same exact spacing that is taking place on the page. The other thing that we need to talk about when it comes to classes is naming our classes in an organized way. If you notice, I have section_home_header, section_home_company_logo, section_home_vision. Now, the reason that I have named things like that is I know that this is a section, I know that this is on the home page, I know that this is the header.

You don't even have to look at the page to really understand what is going on when it comes to your website. There's an organization that is there. There are sections, there's page Global, there's container large, there are components that are all the building blocks of that particular website. As well as these are descriptive, so you know this is the home header, you know that this is the company logo section, you know that this is the vision section.

Descriptive Naming Conventions

There is no denying that when we get down to smaller elements on the page, you know that if I applied this class to this div block, what it's going to do is it's going to align the text to the center. The same thing here, if I apply heading style H2, well it's going to give it the heading style H2. If I apply this other class text size large, text weight bold, text color white, we know exactly what those classes are going to do.

So, not only does it help us save time, maintain consistency and for us to be organized, but it also, if we give them descriptive names, then it becomes very usable.

Webflow's Automatic Naming: A Word of Caution

Now, one of the things that I do want to talk about before we end today is what does Webflow do that would really trip us up? Now, Webflow is certainly trying to be helpful but let me just show you. Now, say I want to style this particular image and so I come in and I give it a 100% width.

Webflow goes ahead, anything that you style, any element you put on the page and then you put a style to it, they're going to name that element for you. Essentially, if you never named anything, you would end up with div block 1000 and image 2000 and text block 57 or 150, however big your project was and however much styling that you applied to these different things, none of that stuff is helpful at all.

So, we need to be aware that if we're going to put any sort of style on an element, we need to name it or Webflow is going to name it for us. So, don't let Webflow name your classes for you, name them on your own.

Conclusion

Alright, well, hopefully you got some value out of this video today as we learned what classes are, how we should use them, why we should use them, why they're super important. How they're going to help you become a better developer and thinking about classes and using them in a more consistent way will help to speed up your development process.

If you got some value out of this video, would you smash that like button? If you want more content like this, hit that subscribe button. And if you have some topic that you want me to cover, leave it down in the comments. I will be happy to try to make a video to answer any questions that you have. Well, I hope to see you on the next video.