CSS Class Name Case Conventions – Best Practices
Published 2026-04-12 · convertcase.in
CSS class names have well-established naming conventions. Here's what the community recommends and why it matters.
Try it now — free instant conversion
No signup · No limits · Works on all devices
1kebab-case Is Standard
.btn-primary, .card-header, .nav-item — hyphens are the conventional separator for CSS class names.
2BEM Methodology
BEM (Block-Element-Modifier): .card__header, .card__body, .btn--disabled. Uses double underscore and double hyphen.
3camelCase in JavaScript
When referencing CSS classes from JavaScript: document.querySelector(".btn-primary") — keep kebab-case in the query.4Tailwind CSS
Tailwind uses its own utility class naming — kebab-case with prefixes: bg-blue-500, text-center, flex-col.
Frequently Asked Questions
Can I use camelCase in CSS class names?
Technically yes, but it's not conventional. CSS is case-sensitive, and camelCase classes can cause confusion. Stick to kebab-case.