CSS Methodology

[00:00:00]
>> Kevin Powell: And speaking of writing CSS, we're gonna be diving into it now, but before we write one line of CSS, one thing that you should decide at the beginning of a project is how you're going to approach writing it. Because a lot of the time I'm teaching people at the very beginning of what they're learning, as soon as we get this on the page, the first thing is, okay, let's style it.

[00:00:21]
Because first of all, it's boring looking at a page of the white background black text that has no styling on it, but also it feels like the right time to start doing it. So the instinct at this point for a lot of people is to start writing CSS for what they have here and then they'll continue down the page.

[00:00:36]
Or maybe they'll even just write all the HTML and then they just dive in at the top of the page and work their way down. I'm gonna say instead of doing that, you wanna have a plan in place from the very beginning. Have an idea of how you wanna be authoring your CSS and having an idea of what you're going to be doing to make it as easy as possible.

[00:00:53]
And just so you can maintain it in the long run, instead of just being, this has a brown background. This is a green, brown, green, you're just redeclaring things over and over again, we wanna try to avoid doing that as much as possible. Because this is a solo project, you're doing it on your own, you're not working in a team.

[00:01:11]
You get to decide how you wanna be doing this and I'm gonna be hopefully throwing some ideas and things along the way to you so you can make these decisions. This obviously comes the big caveat that if you're working in a team, the right approach is whatever your team has decided.

[00:01:24]
So even if you disagree with it, you don't have a choice, everybody needs to be consistent with what they're doing. The big topic that always comes up is utility first versus, quote, unquote, traditional methods. With the rise of Tailwind, obviously, utility classes have become very popular these days.

[00:01:40]
We have Tailwind and lots of other utility libraries that have come up that do things a little bit differently than they do. Tailwind can have its place depending on how you're working, but in a vanilla project like we're doing today. It doesn't really make sense just cuz we're not gonna be working with component-based Javascript framework where utility classes can actually be a little bit more useful.

[00:01:59]
When you have to repeat yourself over and over and over again for everything you're doing. Instead of having a component where those classes only have to live once. Going in with a bit more of a traditional method does make sense, and we'll talk more about that idea between the two of them as we go through things.

[00:02:13]
But just not going all in with that, I think for this type of project, it does make sense. The other thing though on that is don't be dogmatic about how you're writing your CSS. I mentioned in one of the early lessons that my own way of writing CSS has changed over the years, and it's gonna continue changing as time goes on.

[00:02:29]
Don't be the type of person that says this is the right way to do it. It might be the right way for you, but that doesn't mean it's the right way for everybody. And different projects are gonna have different requirements and different approaches that you might need to take to them.

[00:02:41]
So in one project one way might be better, in another project there might be an alternative that you can use that would benefit that project. You wanna look at the whole thing before you decide, I'm a very big fan of finding a balance in general, I find that helps working in no matter what size project you're working on.

[00:02:56]
I used to be the biggest proponent of BEM, it's what I used in every project I I did. And then slowly I started using more utility classes and sneaking them into BEM against the rules of using it. And then I actually had a push going really far into utility classes, and then I found a bit of a middle ground, which is a bit of what I'll be showing you all today.

[00:03:15]
And just finding sort of the right balance between using them or what I feel is the right balance. But that can change depending, again, on the project, on the person, and everything else along the way. So in deciding all of this from the beginning, the first thing I would suggest is looking at the project.

[00:03:30]
And I said, we're gonna create a plan of attack and do all of that, and deciding on how you wanna approach it, means looking at the design and not looking at that one. I'm modifying the design not looking at that one thing that we were just looking at before.

[00:03:44]
Cuz when you could just come in and you hyper focus on one area like that, it's really easy to say, this is how I'm going to code this. And you could take 10,000 different ways of coding this or spreading the CSS for this, and they'd all be perfectly fine if this was your entire project.

[00:03:58]
But then when you start zooming out, you start seeing a few things where you might be able to get a bigger picture. We have certain widths of our site, so this area here's kind of narrow, where the text is, we have this area's a bit wider, this area's really wide.

[00:04:14]
We have the different background colors that are going on, medium brown, the dark green, the dark brown, and the medium brown, they sort of repeat each other. We have these cards that are coming in, and the cards are a little bit of a tricky one, cause I'm calling it a card.

[00:04:27]
We have a background color, we have a border radius on there, and we have orange text as the title and the paragraph text in there. If I come look over here, we have a very similar thing but the title is different. But we still have the same background color, the same padding on there, and the same border radius.

[00:04:43]
And then over here as well, we have the same background color, the same border radius and other things like that. So looking beyond that first page, and looking beyond the top of it, you can start looking for things where you go, okay, maybe I see these similarities here.

[00:04:55]
I wanna start thinking about that and finding ways that, how can I address that and how can I build those up. You don't need to have a plan right away, but just being aware of those things. If I look at my images, all of the images have border radiuses on them.

[00:05:07]
These ones are a bit smaller, these images that are larger have larger border radiuses. How would you tackle that, what would you do to approach that? The text color in some places or the font size and the text color changes. We have small text, we have bigger paragraph text, even bigger paragraph text.

[00:05:25]
How would you approach doing that, how would you change the color from sort of a faded out white a little bit, to the bright white. And how are you gonna decide on all of these things, and looking at the entire thing, and then poking and looking at the mobile design too.

[00:05:40]
To see if there's any big differences that happen there with the font sizes and the other things. You really need to look at all of this before you can decide on what you think is going to work best for the project. Again, you don't need to have this is exactly how I'm going to tackle each one of these problems, but by being aware that these are all things you need to figure out.

[00:05:55]
It's gonna at least get you in the right frame of mind as you're going through things to be looking at everything in the bigger picture. And when you are looking after when you get down to say this section right here, you might look at this section and then go, I'm putting these cards together.

[00:06:09]
But I remember there's three different types of cards, so I'm not just building this card. I'm building something that needs to be able to be reused in different ways, with different title sizes and other things like that. And then you have to start thinking about, okay, how am I gonna do that title and those types of things?

[00:06:23]
So always look big picture, analyze the design as much as possible before you start writing any CSS at all.