How to approach writing CSS?

If we just start at the top of the homepage and work our way down, and then turn our attention to the next page and take the same approach, we'll get the job done, but we won't be doing it very efficiently.

And not only will it take longer to write, but it'll be a lot harder to maintain in the long run as well.

This all means that we need a plan.

Writing maintainable CSS

There are a lot of CSS naming conventions, frameworks, and toolkits out there.

In general, they all serve one purpose: To make it easier to write maintainable CSS!

The thing with all of those naming conventions, frameworks, and toolkits, is that there are equally as many opinions about them as well.

So, what's the right choice?

If you're working on a solo-project, like this one, then the most important thing is you decide on something and do your best to stick with it.

However, if you are working as part of a team, the right approach is whatever the team is using.

Utility-first vs. "traditional" methods

With the rise in Tailwind, utility classes are very popular these days, and it's a stark departure from older naming conventions such as BEM.

There are benefits to using utility classes, but I would caution against going all in with utility classes, especially if you're writing vanilla HTML, like we will be doing in this project.

If you're using a JavaScript framework where you are creating reusable components, you can make an argument for going with utility classes.

If, however, you're not using one, they don't make much sense as you'll have to repeating things way too much, and changes become a nightmare.

Plus, some people just don't like utility classes for everything!

Don't be dogmatic

There are certain people who are convinced there is a Right Way to author CSS, and everything else is inferior.

All I have to say to that is, there is probably a Right Way for You, but that doesn't mean it's the right way for everyone, or even every project.

Keep and opened mind and try different approaches in different projects.

Finding a balance

I believe utility classes can be useful for one-off things that you tend to repeat a lot.

For example, sometimes you need to change only the font size or the margin on an element. In those cases, having a utility class in place is super useful.

However, when we need to change the font size, font weight, padding, and color, and then we need to make those same changes to another element, and another one... well that starts getting annoying, and the benefits of making a single, reusable class become apparent.

I will be encouraging people to find the balance they feels right for them as we go through this course.