CSSでWebサイトをデザインしていると、「このクラス名、どう付ければいいんだっけ?」「もっとルールを決めて統一感を出したい」と悩むことはありませんか?
実は、多くのWeb制作者が最も時間を費やしているのが、このクラス名の命名なんです。「コードを書く時間よりも、クラス名を考える時間の方が長い」という声もよく聞きます。
適当につけてしまうと、後で何を指しているのかわからなくなり、メンテナンスが大変になってしまいます。
一方で、しっかりとしたルールで命名されたCSSは、まるで設計図のように読みやすく、チーム開発でもスムーズに作業が進められます。Google、GitHub、Airbnbなど、多くの企業でも独自の命名規則を設けて、保守性の高いCSSを書いています。
この記事では、初心者から中級者まで役立つCSSクラス名のチートシートとして、クラス名の基本ルール、よく使う名前パターン、命名のコツをまとめました。
CSSクラス名の基本ルール
ルール1: 英語でわかりやすく
クラス名は基本的に英単語を使いましょう。日本語でも技術的には動作しますが、以下のような問題があります:
日本語クラス名の問題点
- 文字化けの可能性
- 他の開発者(外国人含む)が理解できない
- URLエンコードが必要になる場合がある
- 業界標準から外れる
良い例
.navigation { /* ナビゲーション */ }
.product-card { /* 商品カード */ }
.contact-form { /* お問い合わせフォーム */ }
避けるべき例
.ナビゲーション { /* 避ける */ }
.商品カード { /* 避ける */ }
ルール2: 小文字+ハイフンの記法
単語は小文字、複数単語をつなぐときは**ハイフン(-)**を使います。
.card-title { color: #333; }
.main-content { padding: 20px; }
.user-profile-image { border-radius: 50%; }
なぜハイフンなのか?
- CSS界隈で最も一般的
- 読みやすく、タイピングしやすい
- HTMLの属性値でも使われている
- SEOにも影響しない
ルール3: 見た目より役割で命名
これは最も重要なルールです。色やサイズなどの見た目ではなく、役割や意味でクラス名をつけましょう。
❌ 見た目ベースの命名(避ける)
.red-box { background: red; }
.big-text { font-size: 24px; }
.left-column { float: left; }
✅ 役割ベースの命名(推奨)
.alert-message { background: red; }
.page-title { font-size: 24px; }
.sidebar { float: left; }
役割ベース命名のメリット
- デザイン変更に強い(赤から青に変えても意味は変わらない)
- 意図が明確に伝わる
- 再利用しやすい
- メンテナンスが楽
ルール4: 短すぎず、長すぎず
/* 短すぎる(意味不明) */
.a { }
.x { }
.btn1 { }
/* 適切な長さ */
.button { }
.card { }
.navigation { }
/* 長すぎる */
.very-important-call-to-action-button-for-premium-users { }
目安: 1〜3単語程度で、意味が伝わる最短の名前
よく使うクラス名チートシート
レイアウト系クラス名
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.container | ページ全体の幅を制御する箱 | サイト全体のmax-width設定 |
.wrapper | 中身を包むボックス | セクション全体を囲む |
.inner | 内側のコンテナ | paddingやmarginの調整用 |
.row | 横並びに並べる行 | FlexboxやGridの親要素 |
.col | 縦のカラム(列) | グリッドの子要素 |
.grid | CSS Gridの領域 | グリッドレイアウト全体 |
.flex | Flexboxコンテナ | フレックスレイアウト |
.section | ページのセクション | 大きな区切り単位 |
使用例
<div class="container">
<div class="wrapper">
<section class="section">
<div class="row">
<div class="col">コンテンツ1</div>
<div class="col">コンテンツ2</div>
</div>
</section>
</div>
</div>
ナビゲーション・メニュー系
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.header | ページヘッダー | サイト上部の領域 |
.footer | ページフッター | サイト下部の領域 |
.nav | ナビゲーション | メニュー全体 |
.menu | メニュー | ナビゲーションの別名 |
.menu-item | メニューの各項目 | リストの子要素 |
.breadcrumb | パンくずリスト | 現在位置の表示 |
.sidebar | サイドバー | メインコンテンツの横 |
.main | メインコンテンツ | 中心となる内容 |
テキスト・タイポグラフィ系
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.title | 見出しタイトル | h1, h2などの装飾 |
.subtitle | サブタイトル | 副見出し |
.heading | 見出し全般 | titleの別名 |
.description | 説明文 | 詳細なテキスト |
.summary | 要約・概要 | 短い説明文 |
.caption | キャプション | 画像の説明など |
.note | 補足・注意書き | 小さなテキスト |
.label | ラベル・札 | フォーム要素のラベル |
.tag | タグ | カテゴリ表示など |
ボタン・リンク系
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.btn | ボタン全般 | 基本のボタンスタイル |
.button | ボタン(.btnの別名) | より明示的な表現 |
.btn-primary | メインボタン | 最も重要なアクション |
.btn-secondary | サブボタン | 補助的なアクション |
.btn-danger | 警告ボタン | 削除など注意が必要 |
.btn-success | 成功ボタン | 保存・送信など |
.link | 一般的なリンク | テキストリンク |
.cta | Call To Actionボタン | 行動を促すボタン |
カード・コンテンツ系
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.card | カード型レイアウト | 商品・記事の表示 |
.card-header | カードのヘッダー | カード上部 |
.card-body | カードのメイン部分 | カード中央 |
.card-footer | カードのフッター | カード下部 |
.article | 記事 | ブログ記事など |
.post | 投稿 | SNS投稿など |
.item | 項目・アイテム | リストの要素 |
.thumbnail | サムネイル画像 | 小さな画像 |
フォーム系
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.form | フォーム全体 | 入力フォーム |
.form-group | フォームのグループ | ラベル+入力欄 |
.form-control | 入力欄 | input, textareaなど |
.form-label | フォームのラベル | 入力項目名 |
.input | 入力欄 | 一般的な入力フィールド |
.textarea | テキストエリア | 複数行入力 |
.select | セレクトボックス | 選択肢 |
.checkbox | チェックボックス | 複数選択 |
.radio | ラジオボタン | 単一選択 |
ユーティリティ(汎用)系
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.text-center | テキスト中央揃え | text-align: center |
.text-left | テキスト左揃え | text-align: left |
.text-right | テキスト右揃え | text-align: right |
.hidden | 非表示 | display: none |
.visible | 表示 | display: block |
.clearfix | フロートクリア | 古い手法だが使用例あり |
.sr-only | スクリーンリーダー専用 | アクセシビリティ |
状態系
クラス名 | 用途・意味 | 使用例 |
---|---|---|
.active | アクティブ状態 | 現在選択中 |
.inactive | 非アクティブ状態 | 無効状態 |
.disabled | 無効状態 | 操作不可 |
.loading | 読み込み中 | ローディング表示 |
.error | エラー状態 | エラー表示 |
.success | 成功状態 | 成功メッセージ |
.warning | 警告状態 | 注意喚起 |
.selected | 選択済み | 選択状態を表示 |
BEM命名規則の実践
BEMとは?
BEM(Block Element Modifier)は、クラス名を体系的に整理する方法論です。
基本構文
.block__element--modifier
- Block: 独立した意味を持つコンポーネント
- Element: Blockの構成要素
- Modifier: BlockやElementの状態・バリエーション
BEMの実例
基本的なカード例
<div class="card">
<div class="card__header">
<h2 class="card__title">商品名</h2>
<span class="card__price">¥1,000</span>
</div>
<div class="card__body">
<img class="card__image" src="product.jpg" alt="商品画像">
<p class="card__description">商品の説明文</p>
</div>
<div class="card__footer">
<button class="card__button card__button--primary">購入</button>
<button class="card__button card__button--secondary">詳細</button>
</div>
</div>
対応するCSS
/* Block */
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
}
/* Elements */
.card__header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
}
.card__title {
font-size: 1.5rem;
margin: 0;
}
.card__price {
color: #e74c3c;
font-weight: bold;
}
.card__image {
width: 100%;
height: auto;
}
.card__button {
padding: 10px 20px;
border: none;
border-radius: 4px;
margin-right: 10px;
}
/* Modifiers */
.card__button--primary {
background: #3498db;
color: white;
}
.card__button--secondary {
background: #95a5a6;
color: white;
}
/* Block Modifier */
.card--featured {
border-color: #f39c12;
box-shadow: 0 4px 8px rgba(243, 156, 18, 0.3);
}
BEMのメリット・デメリット
メリット
- クラスの関係性が明確
- スタイルの衝突が起きにくい
- 大規模開発に適している
- 再利用しやすい
デメリット
- クラス名が長くなる
- HTMLが冗長になる
- 学習コストがある
- 小規模プロジェクトにはオーバースペック
軽量BEM(推奨アプローチ)
完全なBEMは重いので、エッセンスだけを取り入れる軽量版がおすすめ:
<!-- 軽量BEM -->
<div class="product-card">
<h3 class="product-card__title">商品名</h3>
<p class="product-card__price">¥1,000</p>
<button class="product-card__btn">購入</button>
</div>
- Modifierは必要な時だけ使用
- 深いネストは避ける(2階層まで)
- 短縮形も活用(button → btn)
実践的な命名パターン
パターン1: 機能別命名
/* 機能ごとにグループ化 */
.search { }
.search__input { }
.search__button { }
.search__results { }
.user-profile { }
.user-profile__avatar { }
.user-profile__name { }
.user-profile__bio { }
パターン2: ページ別命名
/* ページ固有のスタイル */
.home-hero { }
.home-features { }
.home-testimonials { }
.about-team { }
.about-history { }
.about-values { }
パターン3: コンポーネント別命名
/* 再利用可能なコンポーネント */
.modal { }
.modal__overlay { }
.modal__content { }
.modal__close { }
.dropdown { }
.dropdown__trigger { }
.dropdown__menu { }
.dropdown__item { }
パターン4: レスポンシブ対応
/* デバイス別のクラス名 */
.nav-mobile { display: none; }
.nav-desktop { display: block; }
/* または */
.sidebar {
display: block;
}
.sidebar--mobile {
display: none;
}
@media (max-width: 768px) {
.sidebar {
display: none;
}
.sidebar--mobile {
display: block;
}
}
避けるべき命名パターン
アンチパターン1: 意味のない名前
/* ❌ 避ける */
.box1 { }
.div2 { }
.class-a { }
.temp { }
.test { }
/* ✅ 改善 */
.product-grid { }
.user-card { }
.navigation { }
.hero-section { }
.contact-form { }
アンチパターン2: 見た目ベースの命名
/* ❌ 避ける */
.red-text { color: red; }
.big-box { font-size: 24px; }
.left-side { float: left; }
/* ✅ 改善 */
.error-message { color: red; }
.page-title { font-size: 24px; }
.sidebar { float: left; }
アンチパターン3: 略語の乱用
/* ❌ 避ける */
.usr-prf { } /* user-profile */
.pdt-lst { } /* product-list */
.ctct-frm { } /* contact-form */
/* ✅ 改善 */
.user-profile { }
.product-list { }
.contact-form { }
アンチパターン4: 数字での管理
/* ❌ 避ける */
.section1 { }
.section2 { }
.section3 { }
/* ✅ 改善 */
.hero-section { }
.features-section { }
.contact-section { }
ツールとワークフロー
CSS設計手法の比較
手法 | 特徴 | 適用場面 |
---|---|---|
BEM | 厳密な命名規則 | 大規模開発 |
OOCSS | オブジェクト指向 | 再利用重視 |
SMACSS | カテゴリ分類 | 中規模開発 |
Atomic CSS | 単一目的クラス | ユーティリティ重視 |
CSS Modules | スコープ分離 | モダンフレームワーク |
推奨ツール
Linter・フォーマッター
- stylelint: CSSの品質チェック
- Prettier: コード整形
- CSScomb: プロパティの並び順統一
命名支援ツール
- CSS Tree Shaking: 未使用クラスの検出
- HTML/CSS Class Completion: エディタ拡張
- CSS Stats: クラス名の統計
チーム開発でのルール策定
スタイルガイドの例
/* 推奨: 機能 + 要素 */
.user-profile-avatar { }
.product-card-title { }
.navigation-menu-item { }
/* 推奨: BEM軽量版 */
.card__title { }
.btn--primary { }
.modal__close { }
/* 避ける: 見た目ベース */
.red-button { }
.big-text { }
.left-column { }
よくある質問と回答
Q1: 日本語や全角文字は使えない?
A: 技術的には可能ですが、以下の理由で避けるべきです:
/* 避ける */
.ナビゲーション { }
.商品カード { }
/* 推奨 */
.navigation { }
.product-card { }
理由
- 文字化けリスク
- 国際化対応が困難
- チーム開発での可読性
- 業界標準への準拠
Q2: camelCaseやsnake_caseは使える?
A: 使えますが、CSS界隈ではkebab-case(ハイフン区切り)が主流:
/* CSS界隈の標準 */
.user-profile { }
.product-card-title { }
/* JavaScript風(避ける) */
.userProfile { }
.productCardTitle { }
/* Python風(避ける) */
.user_profile { }
.product_card_title { }
Q3: IDとクラスの使い分けは?
A: 基本的にクラスを使用することを推奨:
<!-- 推奨: クラス使用 -->
<div class="header">
<nav class="navigation">
<ul class="menu">
<li class="menu-item">ホーム</li>
</ul>
</nav>
</div>
<!-- 避ける: ID多用 -->
<div id="header">
<nav id="navigation">
<ul id="menu">
<li id="menu-item">ホーム</li>
</ul>
</nav>
</div>
IDを使う場面
- JavaScript のターゲット
- ページ内リンクのアンカー
- フォームのラベル関連付け
Q4: どのくらい長いクラス名まで許容される?
A: 20〜30文字程度が目安。意味が伝わる最短の名前を心がけましょう:
/* 適切 */
.product-card-title { }
.user-profile-settings { }
/* 長すぎる */
.super-important-call-to-action-button-for-premium-users { }
/* 短すぎる */
.p { }
.x { }
まとめ
CSSクラス名の命名は、コードの品質と保守性を大きく左右する重要な要素です。
重要なポイント
- 英語 + 小文字 + ハイフンの基本記法を守る
- 見た目ではなく役割でクラス名をつける
- BEMのエッセンスを軽く取り入れる
- チーム内でのルール統一が最も重要
実践のコツ
- まずは基本的なパターンから始める
- 迷ったら意味が明確な名前を選ぶ
- 一貫性を保つことを最優先
- ツールを活用してルールを自動チェック
コメント