How to stop agonizing over class names

red, box2, aaa — class names are hard because you’re trying to name what something looks like. Name it for what it’s for instead, and most of the agonizing disappears.

Naming by appearance hurts later

.red {
  color: #e5484d;
}

Looks fine, until you decide it should be blue.

<!-- The class says red, the text is blue: welcome to hell -->
<p class="red" style="color: blue;">On sale</p>

Name it by role and the name survives the color change.

.price-sale {
  color: #e5484d;
}

Ask yourself “what is this?” and write down the answer. That’s the whole method.

BEM — the convention that removes the guesswork

Name things freely for long enough and you end up with a pile of near-identical names. The convention used worldwide is BEM.

block__element--modifier

In practice

<div class="card">
  <h3 class="card__title">Shima</h3>
  <p class="card__text">Lives in Snowland.</p>
</div>

<div class="card card--highlight">
  <h3 class="card__title">News</h3>
  <p class="card__text">I drew something new.</p>
</div>

.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
}
.card__title {
  font-size: 18px;
  margin: 0 0 8px;
}
.card--highlight {
  border-color: #ff8a3d;
  background: #fff8f3;
}

The key move: when you add a variation, keep the original class and add to it (class="card card--highlight"). Shared styling stays on card, and only the difference lives on card--highlight.

Loose is fine. Consistent is what matters

You don’t have to follow BEM to the letter. On a personal site, these three go a long way:

1. Name by role (price-sale, not red)
2. Share a prefix within a component (hero, hero-title, hero-image)
3. Don’t mix conventions in one site (pick camelCase or kebab-case and stay)

The painful thing isn’t having no rule — it’s having several rules at once.

class or id?

Styling goes on classes. Style through an id and you’ll fight to override it when you want a small variation.

Characters you can use

• Lowercase letters and hyphens as the base (profile-card)
• Digits are fine in the middle or at the end (step2), but a name can’t start with a digit (2step is invalid)
• Avoid spaces and non-Latin characters

Summary

1. Name classes by role, not appearance (price-sale, not red)
2. BEM is block__element--modifier — component, part, variation
3. Consistency beats perfection. Style with classes; save ids for JavaScript and anchor links

CSS with good names still makes sense to you a month later. That’s the payoff.