Text Case Conversion for CSS Class Naming

Text Case Conversion for CSS Class Naming

CSS class naming requires converting human-readable text into machine-friendly identifiers. The dominant conventions use kebab-case (lowercase with hyphens) as the base, with methodologies like BEM adding structured patterns on top.

Basic CSS Class Naming

Input:  User Profile Card
Output: user-profile-card

Input:  Primary Button Large
Output: primary-button-large

CSS classes use kebab-case because CSS is case-insensitive by specification, and hyphens are valid in identifiers.

BEM Naming Convention

BEM (Block Element Modifier) is the most widely adopted CSS naming methodology:

Block:    .card
Element:  .card__title        (double underscore)
Modifier: .card--highlighted  (double hyphen)
Full:     .card__title--large

Converting text to BEM format:

"navigation menu item active" → "navigation-menu__item--active"

Tailwind CSS Utility Classes

Tailwind uses a prefix-based kebab-case convention:

"background color blue 500" → "bg-blue-500"
"font size extra large"     → "text-xl"
"padding x axis 4"          → "px-4"

These aren't direct text-to-class conversions but show how Tailwind structures its kebab-case utility names.

CSS Modules and Scoped Classes

CSS Modules allow camelCase in JavaScript while using kebab-case in CSS:

/* styles.module.css */
.user-profile-card { /* ... */ }

// Component.tsx
import styles from "./styles.module.css";
<div className={styles.userProfileCard} />
// or
<div className={styles["user-profile-card"]} />

SMACSS Categories

SMACSS (Scalable and Modular Architecture for CSS) prefixes classes by category:

Base:    (no prefix, applied to HTML elements)
Layout:  .l-header, .l-sidebar
Module:  .card, .nav, .btn
State:   .is-active, .is-hidden
Theme:   .theme-dark, .theme-light

Rules for Valid CSS Class Names

1. Must not start with a digit (.3col is invalid; .col-3 is valid).
2. Can contain letters, digits, hyphens, and underscores.
3. Are case-insensitive in HTML (but case-sensitive in XML/SVG).
4. Should be descriptive and semantic, not presentational.

Edge Cases

• Spaces are replaced with hyphens.
• Special characters (@, #, .+) must be removed or escaped.
• Starting with numbers is invalid — prefix with a letter.
• Consecutive hyphens in non-BEM contexts should be collapsed.