CSSクラス名のチートシート|迷わない命名ルールと便利なパターン集

CSS

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縦のカラム(列)グリッドの子要素
.gridCSS Gridの領域グリッドレイアウト全体
.flexFlexboxコンテナフレックスレイアウト
.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一般的なリンクテキストリンク
.ctaCall 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のエッセンスを軽く取り入れる
  • チーム内でのルール統一が最も重要

実践のコツ

  • まずは基本的なパターンから始める
  • 迷ったら意味が明確な名前を選ぶ
  • 一貫性を保つことを最優先
  • ツールを活用してルールを自動チェック

コメント

タイトルとURLをコピーしました