The article was originally published here

This morning, I opened one of my very first website projects from 5 years ago, and I couldn’t believe what I saw…

The class names I had used were —to be decent — just not the best…

I had to open the website in my browser just to figure out which class went with which element. And then, after browsing a few websites online, I realized this was a common issue!

So, I thought I’d put together the (hopefully) perfect guide on how to name your classes. With this guide, you’ll avoid the mess and, trust me, you’ll feel so much better about your code.

Bad Class Names

Here’s what bad class names look like:

What do these even mean?

Nobody knows. If you come back to this in a month, you’ll be lost. And what about strangers reviewing your code? Yeah… you get it.

But why is this bad?

  • Meaningless names: .x1, .style-3, .thing — these names don't tell you anything about the element. It's like calling a book Book1. How would you know what it's about?
  • Inconsistent naming: .button_2 uses an underscore, but other class names use hyphens. This makes the code harder to maintain. Plus, underscores aren’t as readable in CSS, especially when you’re dealing with long class names.
  • Camel case: The class name .header1 uses camel case. This might be okay in JavaScript, HTML and CSS are better with lowercase letters and dashes.

Good Class Names

Class names should tell you what the element is or what it does.

They should be

  • clear
  • readable
  • and predictable

Here’s a better way to write them:

Now, anyone reading the code knows exactly what each element is.

Best practices for good class names

  • Meaningful names: Use class names that describe the element, like .header, .card, or .button-primary. .style-3 tells you nothing, but .card tells you that this is a card element
  • No camel case: In HTML and CSS, class names should be lowercase with dashes between words (.main-menu, .feature-box). No numbers: Don’t use numbers like .box2. It's not clear what that number means. Instead, use .feature-box or .card-item to describe what it is.
  • Be consistent: Use a naming system like BEM or just keep things simple, but always stick to the same format across your project.

BEM in Your CSS

Now that we know how to name our classes in HTML, let’s take a look at how to use BEM (Block Element Modifier) in our CSS.

Example:

Click me

Here’s how to style these classes in your CSS:

/* Block */
.card {
  background-color: white;
  border: 1px solid #ddd;
}
/* Element */
.card__button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}
/* Modifier */
.card--highlighted {
  border-color: gold;
  background-color: lightyellow;
}
  • .card is a block — it's the main part of the element.
  • .card__button is an element inside the block.
  • .card--highlighted is a modifier that changes the style of the block when it's in a highlighted state.

This makes it super easy to style elements in a predictable and scalable way!

Nouns, Verbs, or Adjectives: What Should You Use for Class Names?

When it comes to naming your classes, use nouns.

The idea is that classes describe things (like buttons, cards, or menus), so it makes sense to use nouns.

  • Use nouns for elements: .button, .card, .menu, .header.
  • Use adjectives for modifiers: .highlighted, .active, .disabled. These describe how something looks or behaves, but they don’t stand alone.

Example:

In this case, button is the noun (it’s a button), and button--primary is an adjective modifier (it’s the primary button).

The same with menu--active: it is an adjective modifier that tells us the menu is active.

The 3-Step Method to Never Mess Up Again

Think before you type 🧠
Before writing a class name, ask yourself: Would someone else understand this in 6 months? If not, pick a better name.

Also, avoid using too many class names for the same element. Each class should have a clear, specific purpose. You don’t need 50 classes for a button — just one or two well-named ones.

Follow a naming system 📖
Use a system like BEM (Block Element Modifier).

This system helps you keep your class names organized, easy to read, and scalable.

Be consistent 🔄
Whatever naming style you pick, use it everywhere!

No mixing and matching different styles. Stick to one system across your whole project. Consistency is key to keeping your code maintainable.

Conclusion: Keep It Simple and Smart

Bad class names make coding hard. Good class names make it easy. Just remember:

  • Use nouns for your class names
  • Stick to a system like BEM
  • Use adjectives for modifiers and avoid verbs for actions
  • Be consistent across the entire project

By following these simple steps, your HTML and CSS will become easier to read, maintain, and scale. You’ll save yourself a lot of headaches down the road, and your teammates will thank you!

Happy coding!