CSSクラス名付けのためのテキストケース変換

CSSクラス名付けのためのテキストケース変換

CSSクラスの命名には、人間が読めるテキストをマシンフレンドリーな識別子に変換する必要があります。主要な慣例はkebab-case（ハイフン付き小文字）をベースとし、BEMのような方法論が構造化されたパターンを追加します。

基本的なCSSクラス命名

入力:  User Profile Card
出力:  user-profile-card

入力:  Primary Button Large
出力:  primary-button-large

BEM命名規則

BEM（Block Element Modifier）は最も広く採用されているCSS命名方法論です：

Block:    .card
Element:  .card__title        （ダブルアンダースコア）
Modifier: .card--highlighted  （ダブルハイフン）
Full:     .card__title--large

Tailwind CSSユーティリティクラス

Tailwindはプレフィックスベースのkebab-case慣例を使用します：

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

CSS Modulesとスコープ付きクラス

CSS ModulesはJavaScriptでcamelCaseを使用しながらCSSではkebab-caseを使用できます：

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

// Component.tsx
import styles from "./styles.module.css";
<div className={styles.userProfileCard} />

有効なCSSクラス名のルール

1. 数字で始めてはいけない（.3col は無効、.col-3 は有効）。
2. 文字、数字、ハイフン、アンダースコアを含められる。
3. HTMLでは大文字小文字を区別しない。
4. 説明的でセマンティックであるべき。

エッジケース

• スペースはハイフンに置き換え。
• 特殊文字（@、#、.+）は削除またはエスケープ。
• 数字で始まるのは無効 — 文字をプレフィックスとして付ける。