Popular Class Naming Conventions

Choosing the Right Convention

The key is consistency within your project and team alignment on the chosen methodology. Consider your project’s scale, team size, maintenance requirements, and tooling when making your choice.

1. Atomic CSS / Utility-First (Tailwind-style)

Intuition

Use small, single-purpose utility classes that can be combined to create any design.

Method

• Each class does one thing (.text-center, .bg-blue-500)
• Combine classes to build components
• Focus on composability over semantics

Examples

1
2
3
4
5

.text-center { text-align: center; }
.bg-blue-500 { background-color: #3b82f6; }
.p-4 { padding: 1rem; }
.rounded { border-radius: 0.25rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

1
2
3
4

<div class="bg-blue-500 text-center p-4 rounded shadow-lg">
    <h2 class="text-white text-xl font-bold">Card Title</h2>
    <p class="text-blue-100 mt-2">Card description</p>
</div>

Drawbacks

• Very verbose HTML
• Difficult to maintain consistent design without tooling
• Can be hard to scan and understand intent
• Requires build process for optimal file size

2. BEM (Block, Element, Modifier)

Intuition

BEM creates a clear, hierarchical relationship between components and their parts, making CSS more predictable and maintainable.

Method

• Block: Standalone component (.header, .menu, .button)
• Element: Part of a block (.block__element)
• Modifier: Variation of block or element (.block--modifier, .block__element--modifier)

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* Block */
.card { }

/* Elements */
.card__header { }
.card__body { }
.card__footer { }

/* Modifiers */
.card--featured { }
.card__header--large { }

1
2
3
4
5

<div class="card card--featured">
    <header class="card__header card__header--large">Title</header>
    <div class="card__body">Content</div>
    <footer class="card__footer">Footer</footer>
</div>

Drawbacks

• Can create very long class names
• Verbose HTML markup
• Learning curve for new developers
• Not ideal for utility-based styling

3. OOCSS (Object-Oriented CSS)

Intuition

Treats CSS like objects with reusable patterns, separating structure from skin and container from content.

Method

• Create reusable “objects” (components)
• Separate structure (.media) from skin (.media-large)
• Avoid location-dependent styles

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* Object */
.media {
    display: flex;
    align-items: flex-start;
}

/* Skin variations */
.media-large .media__image { width: 100px; }
.media-small .media__image { width: 50px; }

/* Structure */
.media__image { margin-right: 10px; }
.media__body { flex: 1; }

1
2
3
4

<div class="media media-large">
    <img class="media__image" src="..." alt="...">
    <div class="media__body">Content here</div>
</div>

Drawbacks

• Can lead to “div soup” with many classes
• Requires discipline to maintain separation of concerns
• May result in unused CSS as objects multiply

4. SMACSS (Scalable and Modular Architecture for CSS)

Intuition

Categorizes CSS rules into Base, Layout, Modules, State, and Theme for better organization.

Method

• Base: Element defaults (html, body, h1)
• Layout: Major layout components (.l-header, .l-sidebar)
• Modules: Reusable components (.tab, .callout)
• State: How modules look in different states (.is-active, .is-hidden)
• Theme: Color and typography variations (.theme-dark)

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* Layout */
.l-header { }
.l-main { }
.l-sidebar { }

/* Module */
.tab { }
.tab-item { }

/* State */
.tab-item.is-active { }
.callout.is-error { }

/* Theme */
.theme-dark .tab { }

1
2
3
4
5
6
7

<div class="l-main">
    <nav class="tab">
        <a class="tab-item is-active">Home</a>
        <a class="tab-item">About</a>
    </nav>
    <div class="callout is-error theme-dark">Error message</div>
</div>

Drawbacks

• Requires strict adherence to categorization
• State classes can become numerous
• Layout prefixes might feel redundant in component-based frameworks

5. ITCSS (Inverted Triangle CSS)

Intuition

Organizes CSS from generic to specific, low to high specificity, forming an inverted triangle structure.

Method

Layers from generic to specific:

1. Settings: Variables, config
2. Tools: Mixins, functions
3. Generic: Normalize, resets
4. Elements: Bare HTML elements
5. Objects: Design patterns (.o-layout)
6. Components: UI components (.c-button)
7. Utilities: Helper classes (.u-hidden)

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* Objects */
.o-layout { display: flex; }
.o-layout__item { flex: 1; }

/* Components */
.c-button { }
.c-button--primary { }

/* Utilities */
.u-hidden { display: none !important; }
.u-text-center { text-align: center !important; }

1
2
3
4
5
6
7
8

<div class="o-layout">
    <div class="o-layout__item">
        <button class="c-button c-button--primary">Click me</button>
    </div>
    <div class="o-layout__item u-text-center u-hidden">
        Hidden content
    </div>
</div>

Drawbacks

• Requires understanding of the triangle concept
• Prefixes can make HTML verbose
• May be overkill for smaller projects

6. SUIT CSS

Intuition

Component-based naming that relies on structured class names and meaningful hyphens.

Method

• ComponentName: PascalCase for components
• ComponentName-descendentName: camelCase for descendants
• ComponentName–modifierName: camelCase for modifiers
• ComponentName.is-stateOfComponent: State classes

Examples

1
2
3
4
5
6
7
8

.Button { }
.Button--primary { }
.Button-icon { }
.Button.is-disabled { }

.SearchForm { }
.SearchForm-field { }
.SearchForm-submitButton { }

1
2
3
4
5
6
7

<form class="SearchForm">
    <input class="SearchForm-field" type="text">
    <button class="Button Button--primary SearchForm-submitButton">
        <span class="Button-icon">🔍</span>
        Search
    </button>
</form>

Drawbacks

• PascalCase can look inconsistent with HTML conventions
• Mixing camelCase and hyphens can be confusing
• Less popular than BEM, smaller community

7. Kebab-case (Traditional/Semantic)

Intuition

Use descriptive, semantic names that describe content or purpose rather than appearance.

Method

• All lowercase with hyphens
• Focus on meaning over appearance
• Often combined with other methodologies

Examples

1
2
3
4
5

.main-navigation { }
.article-header { }
.user-profile { }
.call-to-action { }
.feature-list { }

1
2
3
4
5
6
7

<nav class="main-navigation">
    <ul class="navigation-list">
        <li class="navigation-item">
            <a class="navigation-link">Home</a>
        </li>
    </ul>
</nav>

Drawbacks

• Can become inconsistent across teams
• Semantic meaning may change over time
• No clear hierarchy or relationship indication

8. JavaScript-style (camelCase/PascalCase)

Intuition

Mirror JavaScript naming conventions for consistency in component-based frameworks.

Method

• camelCase for elements: .cardHeader
• PascalCase for components: .UserCard
• Often used in CSS-in-JS solutions

Examples

1
2
3
4

.UserCard { }
.cardHeader { }
.primaryButton { }
.navigationMenu { }

1
2
3
4

<div class="UserCard">
    <header class="cardHeader">User Info</header>
    <button class="primaryButton">Edit Profile</button>
</div>

Drawbacks

• Goes against HTML/CSS conventions
• Can look odd in traditional HTML/CSS setups
• Mixing case styles can reduce readability

9. Hybrid Approaches

Intuition

Combine multiple methodologies to get benefits of each while minimizing drawbacks.

Method Examples

BEM + Utility Classes:

1
2
3

<div class="card card--featured u-margin-bottom-lg">
    <header class="card__header">Title</header>
</div>

SMACSS + BEM:

1
2
3
4
5

<div class="l-container">
    <div class="card card--primary is-loading">
        <div class="card__content">Content</div>
    </div>
</div>

Component + Utility (Modern Framework Approach):

1
2
3
4
5

<div class="UserProfile bg-white rounded-lg shadow-md p-6">
    <div class="UserProfile-avatar mb-4">
        <img class="rounded-full w-16 h-16" src="...">
    </div>
</div>

Drawbacks

• Can become inconsistent without clear guidelines
• Team members need to understand multiple systems
• May lead to decision fatigue

Reference

• https://medium.com/@ConorJonOReilly/css-bem-or-atomic-design-a023beca1a03
• https://medium.com/@hayavuk/the-broken-promise-of-atomic-css-4d3de5e25886
• https://css-tricks.com/bem-101/
• https://css-tricks.com/lets-define-exactly-atomic-css/
• https://en.bem.info/methodology/naming-convention/