Utility Classes

[00:00:00]
>> Kevin Powell: Now we just looked at creating the section class that we're using. The section class acts a lot like a utility class. A wrapper in a very big way is also a utility class. Some people think of utility classes as things that are like one selector for one property value pair, but I find it's anything that does one very specific thing.

[00:00:19]
So wrap the content and holding it in the middle or must setting the padding like we've been doing. And I mention that I do think there's useful times to have a lot of different utilities along the way, but finding the balance is an important thing with them. But I like looking through the project, so we did the spacing now.

[00:00:37]
And if I come and look through the project now, dive into the file, you hopefully saw some other things. I brought some of them up before on other areas where we can have utility classes that could help us out. And the main thing I look for to think of if something could be a useful utility is looking at, say, I look at the paragraph that's right here.

[00:00:59]
This paragraph, let me, the paragraph right there, is identical to the paragraphs that are down here, except the font-size is bigger, there's no other change. It's also identical to this paragraph here, except this one, the color has changed on it, where this one's the light brownish color, and this one here is just pure white.

[00:01:20]
And then if I look in other places too, like this one's actually in between that this one's the same as this, but it's slightly smaller. We have different font-sizes coming in. And one way we could do something like this is on each one of these sections, I could choose, right now, all I've done is called them section, it's section, class section.

[00:01:39]
And I could come in here and be like, okay, this section needs paragraphs that are gonna be a bit bigger. So how would I distinguish, how would I select that? And what a lot of people do is, okay, I'm gonna do section equals joys of mushroom foraging. And then down here, section class is equal to start your adventure, or something like that.

[00:01:58]
And you start naming classes based on the content of what's there inside of each section, and then you just style up that section as it is. That's first of all, a little bit hard cuz sometimes the content can change. So if the content changed right here, and the title was different, all of a sudden the class name has completely lost its meaning.

[00:02:17]
And the other problem is, as a project grows or you need new sections that are getting added, you end up repeating yourself over and over again. Because you'll end up with these areas that are very similar with these slight little differences. Even looking at this section versus this section, we have the background color change.

[00:02:35]
But then, even this section or the two areas that have the green background, the content is quite different. There's similarities between the two of them, but we have the two columns here, we don't have it over here, for example. So trying to find the similarities, where there's small differences, for me, is what I search for when trying to figure out the types of classes I could reuse just to help myself out.

[00:02:54]
And sometimes, I sprinkle these throughout a whole project. And then I find areas like, actually, I'm gonna delete that to a make class, just cuz it's gonna be easier for me to be able to do it that way around. And in the lesson, there is one that you can grab the utilities that I think are useful.

[00:03:10]
But the main thing that I often do is actually, as I look through a lot of the things here, the things that tend, in my opinion, to make the best utility classes are background-colors and font-sizes. Sometimes things like border radiuses. I used to use a lot of margin and padding utility classes, and I moved away from doing that.

[00:03:29]
But if it's something that you like having, you can definitely have those types of utilities just cuz then you don't have to remember 16 pixels versus 21 pixels, you just margin four or margin five. So if you put prefer that type of thin, it's completely fine. I just, again, finding that balance for me, I stopped using those as much as I used to.

[00:03:48]
I found it more tedious than anything and it was easier just to have a class on something cuz, usually, there's other parts to that as well. But for the font-sizes, for background-colors, font-weights, can occasionally be useful, I don't think we need font-weights in this project. But if you have a lot of varying font-weights, and all you need to change is the font-weight on an element and nothing else about it, it can be useful.

[00:04:10]
Just like we're changing the color in a couple of these spots where a utility class could potentially be useful to do something like that. So one thing I tend to do, and some people don't like this, so if you don't like it, that's completely fine. But I actually do this a lot, whoops, wrong layer, my base layer.

[00:04:31]
I tend to use a lot of these that I have all here. And I'm not gonna bother with the border-radiuses, I don't think, but I tend to bother a lot with these ones, and I turn a lot of these into utility classes. And it feels kind of weird having them as a utility class and as a custom property.

[00:04:51]
As we build out things here, hopefully, you see why I bother doing it. But I'm gonna copy all of those, come all the way down to the bottom, cuz that's where I have my utilities. And for me, this is the fastest way to do it, is, we can bring them all in and actually just delete the ends off of all of these just cuz I'm gonna be using them.

[00:05:13]
But then I come in with a, say, text-main, and I turn, whoops, I should have first put the var. I actually do a text-main as a color. And you see this can go really fast, a var text-main. And when you start doing this, it can feel like it's a bit of a long process.

[00:05:35]
I didn't do an opening curly brace. Let me just fix that, there we go, and might use very broken line right now. But once you have this setup, its very fast to copy-paste. And I need my text-brand right so I just select on the high-contrast, I should say, I select the main, I push Command D or Control D, so it select both of them.

[00:06:00]
And then I can do high-contrast, whoops, like that. And then we can get rid of that one. I can copy this one, paste it, select the high-contrast, Control or Command D, and that one was my brand.
>> Kevin Powell: Then we do the same thing for the background-colors and everything else.

[00:06:24]
So it doesn't take very long to do if you're doing it quickly. If you don't wanna name the class the same as the custom property, you don't have to do that either. You could do a BG here, which is what most people would probably do, just cuz it's a bit faster and easier to write BG than it is to write the alternative.

[00:06:41]
But I would do my background-light, I'm just gonna copy this, and then do my background-color. If you're doing utility classes, I would also strongly recommend doing background-color and not background. Cuz occasionally, you need a background-color and a background-image and you don't wanna run this on short hand overwriting issues.

[00:07:07]
So var background-light. If you're doing thing with abate more turing, some of this steps can be automated too, but again, I don't find it that long to do this. Its gonna go full screen so we can see everything I'm doing. Paste it in, light I think is, that's my main,

[00:07:30]
>> Kevin Powell: Main,
>> Kevin Powell: And I'm just gonna do this one here. You get the picture of how this is working and how I work. And we'll do that one as the dark. And then, as I said, all of this is available
>> Kevin Powell: Down a little bit on the page where I'm giving you the different ones I'm using.

[00:07:58]
So if you wanna just go through and grab these ones, it's exactly what I'm doing now, going through them all, there's one additional thing. So just for speed sake, we can grab those instead of copying and pasting everything. And I'm just gonna go from my visually hidden and replace them all.

[00:08:19]
>> Kevin Powell: And then, once you've done that, the only things I've added here is a section title and a text-center. So text-align: center is gonna be useful in a couple of spots. It's always a hand you want to have. You might also wanna have a text-end or a text-right for text alignment, right, if you feel like you need that.

[00:08:39]
In this project, we don't need it, so I'm not gonna add it just for having it. It'd be something, if I needed it later on, I could add it as utility class. And for the section-title, my main thinking with the section-title, it's that idea that I had before where I mentioned I don't like attaching things to the semantic thing.

[00:08:58]
So even though all of my h2's do look the same, I like having a class for that. And I just feel like, in this case, section-title makes sense. I might have other h2's somewhere else that will look differently. And in this case, it's always the title or the heading, so you could call it section heading as well, that I'd be using for each one of those.

[00:09:16]
And then with those in place, it takes a little while to set these up all the time. But then, when you start using them, I'm gonna skip the hero area right here. And I know we haven't got to the navigation yet, we'll get there soon. But then, when we get into our project, the three columns will stay the same.

[00:09:32]
But then we get to this one right here. So that's the start, we're in the right spot. Well, we can start right there where that span is. I can do my class is text-brand and I get the color coming in. I don't really have anything else to change there.

[00:09:48]
It's something I'll probably use occasionally, so it makes sense for me to have that. My h2, as I said, gets my class is equal to section-heading title, which I think I made a mistake in the font-size, cuz that looks tiny. We'll adjust that in a minute, I do apologize.

[00:10:08]
We'll come back to that in a minute, cuz then I also have my section here that had the background-accent that gives us the green background on there. Then if we come down to this section, which is the next one, I do believe. Yeah, that one down here is right here.

[00:10:29]
So for that one, we wanna have the section, we'll have the background-extra-dark. And it's a bit hard to see, but we definitely have a contrast in our text there, and my h2 will also get the class = section-heading, and get too small. So we'll fix that title, keep using the wrong one.

[00:10:53]
Connect with nature. The only change I believe we need down there is also the class section-title. And then we start getting the different background-colors coming through, which makes life look a lot better. Let's just go see what I did with my section-title. Heading-base, mm-hm, I must have made a mistake early on then.

[00:11:17]
Let's go find that, font-size. I think I know what it is, it's not base, it's regular.
>> Speaker 2: Yeah, it's regular,
>> Kevin Powell: Yeah, regular, there we go. Let's just go look down, that's better, [LAUGH]. So regular instead of the base, next up. If I go, let's just go look at this at a little bit of a bigger screen size.

[00:11:46]
I think this one too, I need to adjust as well, so I'm just missing the joys. The joys, there we go. I have an h2 class = section-heading. Title I did that every single one, I think, there we go, awesome,
>> Kevin Powell: Again, I just really wanna preface, this is how I like to work, how I feel like it helps me make a website a little bit for faster.

[00:12:20]
We've done a lot of prep work up until now. And now that things are starting to come together, we should see the speed of things increases as we do things, and we're doing them in very generic ways. I'm not doing things based on how this one section is looking on this one part of the page.

[00:12:34]
I'm trying to find things that are universally going to be able to be applied everywhere. So it definitely leads to a lot more build up. But as time goes on, then our projects can grow from there.
>> Speaker 2: So since you've created some utility classes here, what's the difference with this than just reaching for something like tailwind?

[00:12:53]
It looks similar in the situation with using utility classes. So is there a benefit to writing with selectors or rules, especially, if you're trying to split your code into components?
>> Kevin Powell: Yeah, so hopefully, we're gonna see a little bit, I do I think there's tons of value in utility classes.

[00:13:10]
I just find that the pendulum swings completely over in that direction that we end up with, instead of, especially, when you're writing in a vanilla situation like we're doing now. It ends up at one point, like when we start getting to other things, where I'm looking for things now that are like one-off changes.

[00:13:30]
I can change the color text, the background-color here, little things like that. When we get to say something like the cards where I need padding, a border-radius, a background-color, some spacing that gonna be consistent, so I'm gonna be throwing four or five, six different things at it. Or if I'm doing a button or something like that, instead of having seven utility classes that I might have to reuse the exact same one somewhere else, that's where I'm okay.

[00:13:53]
Once I pass like three utility classes, maybe even two, maybe I could just use a class here and make my life easier. But I do think there's a lot of value in starting with utilities, starting with the generic selectors, as much as possible, doing what you can with them.

[00:14:10]
And then you find these the more situational things after that, and work on those ones individually.