Naming Conventions in CSS (BEM, SMACSS)

Table of Contents

• Introduction
• The Need for CSS Naming Conventions
• What is BEM?
  • BEM Structure
  • Benefits of BEM
  • BEM Example
• What is SMACSS?
  • SMACSS Categories
  • SMACSS Naming Approach
  • SMACSS Example
• BEM vs SMACSS: Key Differences
• Choosing the Right Naming Convention
• Best Practices
• Conclusion

Introduction

As web applications grow in complexity, so does the CSS codebase. Without a proper structure, CSS files can become messy, inconsistent, and hard to maintain. This is where naming conventions play a crucial role. They help organize styles in a scalable and maintainable way, reducing code duplication and increasing clarity for development teams.

In this article, we explore two widely adopted methodologies: BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS). Each offers a unique approach to naming and structuring styles, especially in large projects.

The Need for CSS Naming Conventions

Here are some of the common problems developers face without a naming strategy:

• Unclear relationships between elements and styles
• Global class name collisions
• Difficulty maintaining styles across modules
• Poor readability and reusability

By using a consistent naming convention like BEM or SMACSS, you can prevent these issues while promoting scalability and collaboration.

What is BEM?

BEM stands for Block Element Modifier. It’s a methodology developed by Yandex that encourages writing CSS in a strict, modular format.

BEM Structure

BEM follows this naming structure:

block__element--modifier

• Block: The standalone component name
• Element: A child of the block that performs a specific function
• Modifier: A flag for variations in style or behavior

BEM Example

Consider the following HTML and corresponding CSS using BEM:

<div class="card">
  <h2 class="card__title">Product Name</h2>
  <p class="card__description">This is a product description.</p>
  <button class="card__button card__button--primary">Buy Now</button>
</div>

.card { /* base styles */ }
.card__title { /* styles for title */ }
.card__description { /* styles for description */ }
.card__button { /* base button styles */ }
.card__button--primary { /* primary variation */ }

Benefits of BEM

• Clarity: The structure clearly defines hierarchy and relationships.
• Reusability: Each component is self-contained.
• Avoids Collisions: Names are scoped to the block.
• Scalability: Easy to maintain large codebases.

What is SMACSS?

SMACSS stands for Scalable and Modular Architecture for CSS. Unlike BEM, SMACSS is more of a style guide than a strict naming rule. It divides CSS into different categories, each with a purpose.

SMACSS Categories

1. Base: Browser defaults and general element styles (e.g., body, h1, a)
2. Layout: Styles for major layout areas (.header, .main, .sidebar)
3. Module: Reusable components (.nav, .card, .form)
4. State: Styles that change appearance (.is-active, .is-hidden)
5. Theme (optional): Design variations like dark mode

SMACSS Naming Approach

Rather than using double underscores and hyphens like BEM, SMACSS leans toward:

• Hyphenated class names
• Prefix-based naming for states or layout modules

SMACSS Example

<div class="card card--featured is-visible">
  <h2 class="card-title">Article Title</h2>
  <p class="card-desc">Excerpt of the article.</p>
</div>

.card { /* base styles */ }
.card--featured { /* theme or variation */ }
.is-visible { display: block; }
.card-title { font-weight: bold; }
.card-desc { color: gray; }

BEM vs SMACSS: Key Differences

Choosing the Right Naming Convention

There is no one-size-fits-all answer. The best approach depends on your team’s workflow and project scale:

• Choose BEM if:
  • You prefer strict structure and modularity.
  • You are working in a large team where naming clarity is essential.
  • You want to avoid class name conflicts completely.
• Choose SMACSS if:
  • You want flexibility without being overly verbose.
  • You are refactoring legacy CSS.
  • You value architectural separation (state, module, layout) over strict naming.

It’s also common to adopt a hybrid approach, borrowing ideas from both methodologies.

Best Practices

Regardless of which convention you use, follow these best practices:

• Be consistent: Stick to the same convention across the entire codebase.
• Avoid magic numbers: Use meaningful names and avoid hardcoding.
• Use utility classes wisely: Don’t overuse helper classes unless your methodology includes them (e.g., Atomic CSS).
• Document conventions: Keep a style guide for the team.
• Use tools: Leverage linters or CSS naming enforcers if needed.

Conclusion

Naming conventions are essential for writing scalable, maintainable CSS. Both BEM and SMACSS are powerful methodologies that offer structure and predictability in your stylesheet organization.

• BEM provides a strict, self-documenting system that scales well.
• SMACSS offers more flexibility and emphasizes architectural separation.

Choose the convention that best suits your team and project needs, or combine the strengths of both for a balanced approach. In large web applications, adhering to a consistent naming strategy is one of the keys to maintaining long-term code quality.