Dev.to

Why Your HTML Class Names Suck — And How to Fix Them in 3 Steps

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

Apr 6, 2025 - 18:40
 0
Why Your HTML Class Names Suck — And How to Fix Them in 3 Steps

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:

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

Read More

Tags:

Previous Article

Linux 101: What It Is and Why You Should Care

Next Article

Are You Developing Your React App the Wrong Way?!

Related Posts

Complete Guide: Build Your 1st AI Agent (No-Code + Code Tutorial)

Complete Guide: Build Your 1st AI Agent (No-Code + Code...

Mar 28, 2025  0

Feb 19, 2025  0

Using Local Storage for Prototyping

Using Local Storage for Prototyping

Mar 27, 2025  0