CSS Class Names

Improve this page
  • Keep classes lowercase and use dashes (not underscores or camelCase). Dashes serve as natural breaks in related class (e.g., .btn-primary and .btn-secondary).
  • Avoid excessive and arbitrary shorthand notation. .btn could be used for button, but .s doesn’t mean anything.
  • Keep classes as short and succinct as possible.
  • Do not be afraid to use longer names when nessasary.
  • Use meaningful names; use structural or purposeful names over presentational.
  • Prefix classes based on the closest parent or base class.
  • Use IDs to target with Javascript, but keep these IDs out of your CSS.

It’s also useful to apply many of these same rules when creating Sass variable names.

// Bad example

.t { ... }
.red { ... }
.header { ... }


// Good example

.tweet { ... }
.important { ... }
.tweet-header { ... }