Staying organized & naming things

Staying organized

The more CSS we write, the messier it tends to get. There are some newer CSS features like @layer that we can use to help us stay organized, but before worrying about adding a layer of complexity by adding those in, there are a few general rules of thumb that you can use:

Start your CSS file with general styling (body selector, followed by element selectors that set the stage)
Get more specific where needed with classes
Organize your classes by what they are doing
- layout
- components
- utilities

Naming things

“There are only two hard things in computer science: cache invalidation and naming things.”

— Phil Karlton

Coming up with good class names seems easy at first, but it quickly becomes incredibly hard.

We’ll be talking about it as we go through examples in this course, but my main suggestion to you is to keep the names descriptive.

On top of that, I’d also suggest that, as much as possible, you separate concerns. There are times when you might need a rule that has 20+ declarations, but often it’s a bit of a red flag that it’s doing a little too much.

Avoid names that don’t tell you anything about what they are for

There are a lot of CSS naming conventions out there. They all have different opinions on how to name things, but one thing they have in common is that you don’t want to name things .box-1, .box-2, etc. Those boxes are doing something, so give them a name that describes what that is. It can be something like .card, .call-out, or .hero-content for example.

Keep an eye out for repeated code

If you’re ever repeating a declarations, or a few declarations over and over again, it’s a good signal that maybe you should make a single class that does that one thing, and then reuse it wherever you need it.