CSS Naming Conventions: BEM, kebab-case, and Best Practices

Naming CSS classes is deceptively difficult. A poorly named class can make stylesheets impossible to maintain, while a consistent naming convention makes code readable and scalable. This guide covers the most popular CSS naming conventions and helps you choose the right one for your project.

Why kebab-case Is the CSS Standard

The CSS specification itself uses kebab-case (lowercase words separated by hyphens) for all its properties and values: background-color, font-size, border-radius, flex-direction. Following the same convention for your class names creates consistency and is the most widely adopted approach in the industry.

Convert any text to kebab-case instantly with our kebab-case converter.

BEM: Block Element Modifier

BEM is the most popular CSS naming methodology. It provides a structured way to name classes based on their role in the component hierarchy:

• Block: The standalone component (.card)
• Element: A part of the block, indicated by double underscores (.card__title)
• Modifier: A variation or state, indicated by double hyphens (.card--featured)

BEM Advantages

• Self-documenting: Class names tell you exactly what the element is and where it belongs
• Low specificity: Everything is a single class selector, avoiding specificity wars
• Modular: Components are independent and can be moved without breaking styles
• Predictable: Developers know exactly how to name new elements and modifiers

Other CSS Naming Approaches

CSS Naming Best Practices

• Be descriptive: Use .user-profile-card instead of .upc. Clear names are more important than short names.
• Avoid styling-based names: Use .error-message instead of .red-text. Colors and sizes change; purposes don't.
• Stay consistent: Pick one convention and stick with it across the entire project. Mixing conventions creates confusion.
• Use a formatter: Our CSS Formatter can help keep your stylesheets clean and consistent.
• Keep selectors flat: Avoid nesting selectors more than 2-3 levels deep. BEM helps enforce this naturally.

URL Slugs and CSS Classes

The kebab-case convention extends beyond CSS. It is also the standard for URL slugs, making URLs readable and SEO-friendly. Our Slugify Tool converts any text into a clean, URL-safe slug using kebab-case.

CSS Naming in Modern Frameworks

Modern frameworks are shifting how developers think about CSS naming:

• Tailwind CSS: Uses utility classes (text-lg, bg-blue-500) instead of semantic class names. No naming decisions needed.
• CSS Modules: Automatically scopes class names to components, so naming collisions are impossible. camelCase is common here.
• Styled Components: CSS is written inside JavaScript, so naming follows JavaScript conventions.

Even with these tools, understanding naming conventions is valuable. Many projects use a mix of approaches, and BEM/kebab-case remain the foundation. For converting between naming styles, try our snake_case converter alongside the kebab-case tool.