Naming CSS Classes

Naming is the hardest part of CSS, and the part that matters most as a project grows. Good names mean you can read a stylesheet a year later and know what each rule does.

Name by purpose, not by appearance

Be consistent

Choose one style and use it everywhere. The common choice is lowercase words joined with hyphens (product-card). Do not mix productCard, product_card and product-card.

BEM: a simple pattern

Block, Element, Modifier is a popular naming convention that keeps names flat and predictable.

• Block: a standalone component: .card
• Element: a part of it: .card__title (two underscores)
• Modifier: a variation: .card--featured (two hyphens)

1
2
3
4
5
6
7
8

<style>
  .card { border: 1px solid #e6ddd7; border-radius: 8px; padding: 12px; max-width: 260px; margin-bottom: 8px; }
  .card__title { margin: 0 0 6px; font-size: 18px; }
  .card__text { margin: 0; color: #5c5750; }
  .card--featured { border-color: #d94a00; background: #fff7f1; }
</style>
<div class="card"><h3 class="card__title">The Slow Garden</h3><p class="card__text">A gentle novel.</p></div>
<div class="card card--featured"><h3 class="card__title">Night Trains</h3><p class="card__text">Featured this week.</p></div>

Every selector is a single class. Specificity stays low, you can move the card anywhere on the page and it still looks right, and the name tells you where the style belongs.

You do not have to use BEM

The idea matters more than the exact punctuation: one class per component part, short selectors, purpose-based names. Many teams use BEM, others use simpler patterns. Pick one for the project.

Names for state

For states that change with JavaScript, use clear prefixes such as .is-open, .is-active, .has-error:

1
2

.menu { display: none; }
.menu.is-open { display: block; }