What’s the big deal, just name it the first thing that makes sense, right? It makes sense now, so it will probably always make sense! .btn--small, .btn--tiny, .btn--really-tiny, umm… .btn--really-super-duper-tiny!

Considering your class names avoids headaches and confusion down the road. But that’s easier said than done. Before we figure that out, let’s get some basics down.

Formatting Your Class Names

There’s lots of different naming conventions out there. I use BEM. If you’re not familiar with BEM naming, you’ll still get the gist of this article. If you want to learn about BEM, read this intro to BEM.

I tend to use dashes to separate words in my class names. Use one or two words when you’re naming each component. It’s better to be long-winded and understood than terse and confusing.

If you’re using BEM, as long as you reserve __ for separating blocks from elements and -- for modifiers, you’ll probably be OK. Whatever you do, be consistent and make sure you document it so other people know what convention to follow.

// examples for naming classes
// This is using BEM: Crash course!
// .main-nav is the main block
// .main-nav__link is an element inside of .main-nav
// .main-nav__link--current-page is modifying .main-nav__link

// Dashes to separate words
.main-nav__link--current-page {
  color: blue;
}
// or camelCase
.mainNav__link--currentPage {
  color: blue;
}
// or Capitalize the first word of each element
.Main-nav__Link--Current-page {
  color: blue;
}
// or...  sure... FART separators... 
// I guess... as long as it's consistent...
.mainFARTnav__link--currentFARTpage {
  color: blue;
}

Avoid Using Visual Descriptors in Your Class Names

Avoid using visual descriptions, because they may not always look that way. The designer might change the size of the h2 of the component, and all of a sudden that .small-header class doesn’t make sense. Or, it can change sizes across media queries or colors across states.

For example:

.big-blue-button {
  background: blue;
  color: white;
  font-size: 40px;
  padding: 20px 40px;
}

// a screen less than or equal to 640px wide
@media (max-width: 640px) {
  // not so big anymore...
  .big-blue-button {
    font-size: 14px;
    padding: 8px 12px;
  }
}

// not so blue anymore...
.footer .big-blue-button {
  background: red;
}

It’s better to name it as generically as you can for the component, while still communicating something specific. Using generic names means when the design team changes the color of the .big-blue-button to red, you don’t have to rename your HTML too.

Like, What is Your Component at Its Core, Dude?

Here’s how you can rework the same component using BEM, and thinking through it a little.

What’s our main component, at its core. Like, who is it, really, like, really meant to be, duuude?

.big-blue-button, after climbing to the top of Mount Everest on an intense soul-searching journey, realized it was really a .button in its heart.

“But, you’re not just any .button,” we cry out! “You’re a big one! And a blue one!”

For now at least. How can we signify that?

Well, why is it big and blue? Because we want people using the website to see it, right? It needs to stand out.

When would we be using it? When we really want people to click it, probably. Don’t focus on its looks. Like, stop being so vain and stuff. Instead, let’s focus on when and why we use it.

The .button formerly known as .big-blue-button, I now knight you .button--call-to-action!

By focusing on the reason and meaning of the button, we’ve found a class name that can stand up to design changes. And, as a bonus, if you can’t figure out a good name for it based on its meaning and purpose, there’s a good chance you don’t need it at all.

Without further ado, let’s see some reworked CSS using our new class names.

// main block
.button {
  background: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

// modify your block
.button--call-to-action {
  font-size: 40px;
  padding: 20px 40px;
}

@media (max-width: 640px) {
  // it's still a call to action,
  // even if it's small
  .button--call-to-action {
    font-size: 14px;
  }
}

// it all still makes sense!
.footer .button--call-to-action {
  background: red;
}

Things just make sense now, ya dig?

By staying consistent and considering the purpose of our components instead of how they look, we have modular class names that will stand the test of time.

Do you have any tips or something I overlooked? Let me know on Twitter or in the comments.