CSSクラス名命名規則をマスターするBEM実践ガイド完全版

当ページのリンクには一部広告が含まれています。

CSSクラス名の命名規則は、Webサイト制作において避けて通れない重要な要素です。適切な命名規則を身につけることで、チーム開発での効率性が向上し、保守性の高いコードが書けるようになります。

この記事では、命名規則BEMを中心として、ハイフンやキャメルケースといった記法の使い分けから、実践的なクラス名命名例まで、初心者から上級者まで役立つチートシート的な内容をお届けします。

また、CSSのクラス名で使えない文字や、ClassIDの命名規則における制限についても詳しく解説いたします。

記事のポイント

BEMなどの主要な命名規則の実践方法がわかる
ハイフンとキャメルケースの使い分けがマスターできる
プロジェクトで使える具体的なクラス名例が豊富にある
CSSクラス名の制限事項と注意点が理解できる

CSSクラス名命名規則の基本ルールと効果的な付け方

この章では、CSSクラス名の基本的な命名規則について解説します。適切な命名規則を理解することで、読みやすく保守性の高いコードが書けるようになります。

CSSクラス名の命名規則一覧とハイフンを使った書き方
CSSクラス名命名例で学ぶキャメルケースとその他の記法
命名規則BEMの基本概念と実践的な使い方
ClassIDの命名規則は？適切な使い分けと注意点
CSSのクラス名で使えない文字は？制限事項の完全解説
CSSのクラス名にはどのような制限がありますか？詳細ガイド

CSSクラス名の命名規則一覧とハイフンを使った書き方

CSSクラス名の命名において、単語と単語をつなぐ記法は開発者にとって悩ましい問題です。主要な記法として、ハイフン（ケバブケース）、アンダースコア（スネークケース）、キャメルケース、パスカルケースの4つが挙げられます。

ハイフンを使った記法は「ケバブケース」と呼ばれ、card-titleやheader-navのように単語をハイフンでつなぐ方法です。この記法の最大の利点は、HTMLとCSSの親和性が高いことにあります。HTMLの属性名でもハイフンが使用されているため、統一感のあるコードが書けるでしょう。

また、ハイフンを使った命名は可読性に優れています。例えば、search-result-containerというクラス名は、一目で検索結果のコンテナであることが理解できます。複数の開発者が関わるプロジェクトでは、こうした直感的な命名が重要な役割を果たします。

ただし、ハイフン記法にも注意点があります。単語の境界が明確でない場合、意図しない意味に解釈される可能性があるためです。例えば、user-name-inputとusername-inputでは、前者が「ユーザー名の入力」、後者が「ユーザーネームの入力」と異なる意味になる場合があります。

このため、チーム内で命名規則を統一し、単語の区切り方についても明確なルールを設けることが大切です。多くのプロジェクトでは、BEMなどの設計手法と組み合わせてハイフン記法を採用しています。

ハイフン記法のベストプラクティス

ハイフン記法を効果的に使うためには、以下の点を意識しましょう。まず、意味のある単語の組み合わせを心がけることです。main-contentは「メインのコンテンツ」として理解しやすいですが、content-mainでは意味が曖昧になります。

次に、階層構造を意識した命名を行うことが重要です。section-title（セクションのタイトル）、section-content（セクションのコンテンツ）といった形で、親要素からの関係性を明確にできます。

さらに、プロジェクト全体で統一した英単語を使用することも大切です。「ボタン」を表現する際に、あるページではbutton、別のページではbtnと略語を使用すると、一貫性が損なわれてしまいます。

CSSクラス名命名例で学ぶキャメルケースとその他の記法

キャメルケースはcardTitleやheaderNavのように、単語の最初を大文字にして結合する記法です。JavaScriptの変数名でよく使用されるため、フロントエンド開発者にとって馴染みやすい記法といえるでしょう。

キャメルケースの利点は、視覚的に単語の境界が分かりやすいことです。searchResultContainerという記述では、大文字の部分で単語が区切られていることが直感的に理解できます。また、ハイフンを使わないため、文字数を削減できる効果もあります。

一方で、CSSでキャメルケースを使用する際の注意点もあります。HTMLの属性値では大文字と小文字が区別されるブラウザが存在するため、予期しない動作を引き起こす可能性があるのです。現在の主要ブラウザではこの問題は発生しませんが、互換性を重視するプロジェクトでは慎重な検討が必要でしょう。

スネークケースはcard_titleのようにアンダースコアで単語をつなぐ記法です。Pythonなどのプログラミング言語でよく使用されますが、CSSでは採用されることが少ない傾向にあります。ただし、BEMではElementとModifierの区切りで__や--といった記号を使用するため、一部の開発者には親しみやすい記法かもしれません。

パスカルケースはCardTitleのように、すべての単語の最初を大文字にする記法です。Reactのコンポーネント名で使用されることが多いため、コンポーネント指向の開発では選択肢の一つとなります。

どの記法を選択するかは、プロジェクトの特性やチームの方針によって決まります。重要なのは、選択した記法を一貫して使用することです。混在した記法は可読性を損ない、保守性の低下を招く原因となります。

命名例の比較と選択基準

実際のプロジェクトでは、以下のような命名例が考えられます。ヘッダーのナビゲーションメニューを例に取ると、ハイフン記法ではheader-nav-menu、キャメルケースではheaderNavMenu、スネークケースではheader_nav_menuとなります。

この中でも、現在のWeb開発ではheader-nav-menuのようなハイフン記法が最も一般的です。理由として、HTMLとCSS、さらにはフレームワークの多くがハイフン記法を採用していることが挙げられます。

また、SEOの観点からも、ハイフン記法は有利とされています。検索エンジンはハイフンを単語の区切りとして認識するため、seo-friendly-contentのようなクラス名は検索エンジンにとって理解しやすい形式です。

命名規則BEMの基本概念と実践的な使い方

BEM（Block Element Modifier）は、Yandex社が開発したCSS設計手法の一つです。CSSクラス名を「Block」「Element」「Modifier」の3つの要素に分類し、一意で明確な命名を実現します。

Blockは独立した意味を持つコンポーネントを表します。例えば、card、button、navなどがBlockに該当します。Blockは再利用可能であり、ページ内のどこに配置しても同じ見た目と機能を維持する必要があります。

Elementは、Blockの構成要素であり、Block外では意味を持たない部分です。card__title、button__text、nav__itemといった形で、Block名に続けて__（アンダースコア2つ）を使用して表現します。この記法により、要素の所属関係が明確になります。

Modifierは、BlockやElementの状態や見た目のバリエーションを表現します。button--primary、card--large、nav__item--activeのように、--（ハイフン2つ）を使用して表現します。Modifierを使用することで、同一のコンポーネントでも異なる状態を表現できるのです。

BEMの実践例として、カードコンポーネントを考えてみましょう。基本のカード要素はcardというBlockで定義し、その中のタイトルはcard__title、本文はcard__content、画像はcard__imageとして命名します。プライマリカラーのカードはcard--primary、大きなサイズのカードはcard--largeとして表現するのです。

BEMを導入する利点は、クラス名から要素の役割と関係性が一目で理解できることです。また、CSSの詳細度（specificity）が均一になるため、スタイルの競合を避けやすくなります。

ただし、BEMにはクラス名が長くなりがちという課題もあります。navigation__list-item--activeのようなクラス名は、意味は明確ですが、HTMLが冗長になる可能性があります。この問題に対処するため、多くのプロジェクトではBEMをベースとしつつ、チーム独自のルールを追加しています。

ClassIDの命名規則は？適切な使い分けと注意点

CSSにおけるClassとIDの使い分けは、初学者が混乱しやすい部分の一つです。基本的にClassは再利用可能なスタイルに、IDは一意の要素に対して使用しますが、命名規則においても明確な違いがあります。

IDの命名規則では、ページ内で唯一の要素であることを意識した名前をつけることが重要です。例えば、header、main-content、footerといったページ構造を表す名前や、contact-form、search-boxといった機能的な名前が適しています。

一方、Classの命名規則では、再利用性を意識した汎用的な名前をつけることが求められます。btn、card、list-itemといった、複数の場所で使用される可能性がある要素に対して使用するのです。

HTMLのセマンティクス（意味論）の観点から、IDは主にページ内リンクやJavaScriptのセレクタとして使用されることが多くなっています。例えば、<a href="#contact">お問い合わせ</a>といったページ内リンクでは、IDが重要な役割を果たします。

現代のWeb開発では、スタイリングにはClassを使用し、IDはページ構造の識別や機能的な用途に限定することが一般的になっています。これは、CSSの詳細度によるスタイルの競合を避けるための実践的なアプローチです。

IDとClassの詳細度への影響

CSSの詳細度において、IDセレクタはClassセレクタよりも高い優先度を持ちます。具体的には、IDは100点、Classは10点、要素セレクタは1点という計算方法で詳細度が決まります。

この仕組みのため、IDを多用すると後からスタイルを上書きすることが困難になります。例えば、#header { color: blue; }というスタイルを.header { color: red; }で上書きしようとしても、IDの方が優先されてしまうのです。

こうした問題を避けるため、多くの開発チームではCSSにIDセレクタを使用しないルールを設けています。代わりに、[id="header"]のような属性セレクタを使用することで、Classと同等の詳細度を維持できます。

CSSのクラス名で使えない文字は？制限事項の完全解説

CSSクラス名には、HTMLとCSSの仕様により使用できない文字や、推奨されない文字が存在します。これらの制限を理解することで、エラーのない安全なクラス名を作成できるようになります。

まず、絶対に使用してはいけない文字として、半角スペースが挙げられます。class="my button"のように記述すると、HTMLパーサーはmyとbuttonという2つの独立したクラスとして解釈してしまいます。このため、単語間の区切りには必ずハイフンやアンダースコアを使用しなければなりません。

数字で始まるクラス名も使用できません。例えば、1st-sectionや2column-layoutといったクラス名は無効です。CSSの仕様では、識別子は文字またはアンダースコアで始まる必要があるためです。どうしても数字を含めたい場合は、section-1stやlayout-2columnのように文字で始める必要があります。

特殊文字の使用にも注意が必要です。感嘆符（!）、アットマーク（@）、シャープ（#）、ドル記号（$）、パーセント（%）、アンパサンド（&）、括弧類、セミコロン（;）、コロン（:）、カンマ（,）、ドット（.）などは、CSSセレクタで特別な意味を持つため使用できません。

日本語文字の使用は技術的には可能ですが、推奨されません。ブラウザの実装やツールチェーンによっては予期しない動作を引き起こす可能性があります。また、チーム開発では日本語を理解しない開発者もいるため、英語での命名を心がけることが重要です。

安全なクラス名の作成ガイドライン

安全で有効なクラス名を作成するためには、以下のガイドラインに従うことが推奨されます。使用可能な文字は、英小文字（a-z）、英大文字（A-Z）、数字（0-9）、ハイフン（-）、アンダースコア（_）に限定することです。

クラス名の最初の文字は、必ず英字またはアンダースコアにします。数字や特殊文字で始めることはできません。また、大文字と小文字は区別されるため、MyClassとmyclassは異なるクラス名として扱われます。

長さの制限については、技術的な上限はありませんが、実用的な観点から50文字以内に収めることが推奨されます。あまりに長いクラス名は可読性を損ない、開発効率の低下を招きます。

予約語の回避も重要です。HTMLやCSSで特別な意味を持つ単語（style、class、idなど）をクラス名に使用することは避けるべきです。これらの単語は将来的に仕様変更の対象となる可能性があります。

CSSのクラス名にはどのような制限がありますか？詳細ガイド

CSSクラス名の制限は、技術的制限と実践的制限の両面から理解する必要があります。技術的制限は仕様によって定められた絶対的なルールであり、実践的制限は開発効率や保守性を考慮した推奨事項です。

技術的制限として最も重要なのは、CSS識別子の仕様に関するものです。クラス名はCSS識別子として扱われるため、Unicode文字、ハイフン、アンダースコア、および数字が使用可能ですが、開始文字は文字またはアンダースコアでなければなりません。

エスケープシーケンスの使用も可能ですが、実践的ではありません。例えば、.1\st のように数字で始まるクラス名をエスケープして使用することは技術的には可能ですが、可読性と保守性を著しく損ないます。

ブラウザの実装差異も考慮すべき制限の一つです。古いブラウザでは、特定の文字やエンコーディングに対して異なる動作を示す場合があります。互換性を重視するプロジェクトでは、ASCII文字に限定することが安全です。

実践的制限として、チーム開発での統一性が挙げられます。技術的には有効でも、チーム内で理解しにくいクラス名は避けるべきです。例えば、𝓫𝓾𝓽𝓽𝓸𝓷のような装飾文字を使ったクラス名は有効ですが、実用的ではありません。

SEOへの影響も実践的制限の一つです。検索エンジンはクラス名の内容を解析する場合があるため、意味のない文字列や特殊文字の多用は避けることが推奨されます。

制限を考慮したクラス名設計

これらの制限を踏まえ、実際のプロジェクトでは以下の原則に従ってクラス名を設計することが効果的です。まず、英数字とハイフンのみを使用し、文字で始まるという基本ルールを徹底します。

意味の明確性を重視し、クラス名を見ただけで要素の役割が理解できるよう心がけます。btn-primaryは「主要なボタン」、nav-itemは「ナビゲーションの項目」として直感的に理解できるでしょう。

一貫性のある命名パターンを採用することも重要です。プロジェクト全体で同じパターンを使用することで、新しいクラス名を作成する際の迷いが減り、開発効率が向上します。

最後に、将来の拡張性を考慮した設計を行います。現在の要件だけでなく、機能追加や仕様変更に対応できる柔軟性を持ったクラス名を設計することが、長期的な保守性の向上につながるのです。

CSSクラス名命名規則を効率化するチートシートと実用例

実際の開発現場では、効率的なクラス名の決定が求められます。この章では、すぐに使えるチートシートと実用的な例を通して、プロジェクトで活用できる命名テクニックを解説します。

CSSクラス名チートシートで迷わない単語選び
命名規則一覧から選ぶ最適なパターン
実際のプロジェクトで使えるクラス名命名例集
保守性を高めるクラス名の設計思想
チーム開発で統一すべき命名ガイドライン
よくある命名の間違いとその解決策

CSSクラス名チートシートで迷わない単語選び

開発現場でクラス名を決める際、適切な英単語が思い浮かばず時間を消費してしまうことがよくあります。そこで、頻繁に使用される単語をカテゴリ別に整理したチートシートが有効です。

レイアウト関連の単語として、container（コンテナ）、wrapper（ラッパー）、inner（内側）、outer（外側）、content（コンテンツ）、section（セクション）、area（エリア）、region（領域）があります。これらの単語は、ページの構造を表現する際に重宝します。

ナビゲーション関連では、nav（ナビゲーション）、menu（メニュー）、list（リスト）、item（アイテム）、link（リンク）、breadcrumb（パンくずリスト）、pagination（ページネーション）、tab（タブ）が基本的な語彙です。

コンポーネント関連として、card（カード）、panel（パネル）、modal（モーダル）、dialog（ダイアログ）、dropdown（ドロップダウン）、accordion（アコーディオン）、carousel（カルーセル）、slider（スライダー）などがあります。

状態を表現する形容詞には、active（アクティブ）、current（現在の）、selected（選択された）、disabled（無効な）、hidden（隠れた）、visible（表示された）、loading（読み込み中）、complete（完了）があります。

サイズや位置に関する単語として、small、medium、large、tiny、huge、top、bottom、left、right、center、first、last、primary、secondaryが使用されます。

単語選択の優先順位

適切な単語を選択する際は、まず一般的で理解しやすい単語を優先します。buttonとbtnのように略語も存在しますが、チーム内で統一されていれば問題ありません。ただし、初学者が多いチームでは、略語よりも完全な単語を使用することで理解しやすくなります。

次に、HTMLの要素名との整合性を考慮します。nav要素に対応するクラス名はnavやnavigationとすることで、HTML構造との関連性が明確になります。

専門用語の使用については慎重に判断しましょう。業界特有の用語は、その分野の専門家には理解しやすいですが、異なる背景を持つ開発者には分かりにくい場合があります。可能な限り一般的な英単語を使用することが推奨されます。

命名規則一覧から選ぶ最適なパターン

プロジェクトの特性に応じて、最適な命名規則パターンを選択することが重要です。主要なパターンとして、BEM、OOCSS、SMACSS、ITCSS、Atomic Designベースの命名があります。

BEMパターンでは、block__element--modifierの形式を使用します。例えば、card__title--large（大きなカードのタイトル）、button--primary（プライマリボタン）、nav__item--active（アクティブなナビゲーションアイテム）といった命名になります。

OOCSSパターンでは、構造と見た目を分離した命名を行います。media（構造）とmedia-reversed（見た目のバリエーション）、btn（基本構造）とbtn-primary（色のバリエーション）といった組み合わせです。

SMACSSパターンでは、Base、Layout、Module、State、Themeの5つのカテゴリに分類します。Layoutにはl-header、l-sidebar、Moduleにはm-card、m-button、Stateにはis-active、is-hiddenといった接頭辞を使用します。

機能ベースの命名パターンでは、要素の機能や役割を重視します。search-form（検索フォーム）、user-profile（ユーザープロフィール）、shopping-cart（ショッピングカート）といった、用途が明確な命名です。

階層ベースの命名パターンでは、HTML構造の階層関係を表現します。header-nav-menu-itemのように、親から子への関係を順番に表現する方法です。

パターン例特徴BEMcard__title--largeコンポーネント指向、明確な関係性OOCSSbtn btn-primary構造と見た目の分離SMACSSm-card is-activeカテゴリ別の分類機能ベースsearch-form用途の明確性階層ベースheader-nav-item構造の表現

実際のプロジェクトで使えるクラス名命名例集

実際の開発で頻繁に遭遇するコンポーネントの命名例を、具体的なHTMLコードとともに紹介します。これらの例は、そのままプロジェクトで活用できる実践的なものです。

ヘッダーコンポーネントでは、基本構造としてheader、その中のロゴ部分をheader__logo、ナビゲーション部分をheader__nav、メニューアイテムをheader__nav-itemと命名します。レスポンシブ対応のハンバーガーメニューはheader__menu-toggleとして表現できます。

カードコンポーネントでは、基本のcardに加えて、card__image（画像部分）、card__content（コンテンツ部分）、card__title（タイトル）、card__text（本文）、card__footer（フッター）といった構成要素を定義します。バリエーションとしてcard--featured（注目カード）、card--compact（コンパクトカード）を用意できます。

フォームコンポーネントでは、formをベースに、form__group（フィールドグループ）、form__label（ラベル）、form__input（入力フィールド）、form__error（エラーメッセージ）、form__submit（送信ボタン）といった構成が一般的です。

ボタンコンポーネントでは、基本のbtnに機能別のModifierを組み合わせます。btn--primary（プライマリボタン）、btn--secondary（セカンダリボタン）、btn--danger（危険な操作用ボタン）、btn--disabled（無効化ボタン）、btn--large（大きなボタン）、btn--small（小さなボタン）などです。

モーダルコンポーネントでは、modalをコンテナとして、modal__overlay（オーバーレイ）、modal__content（コンテンツ部分）、modal__header（ヘッダー）、modal__body（ボディ）、modal__footer（フッター）、modal__close（閉じるボタン）という構成が効果的です。

コンポーネント間の一貫性

複数のコンポーネントで共通する要素には、一貫した命名を使用することが重要です。例えば、すべてのコンポーネントでタイトル部分は__title、画像部分は__image、アクション部分は__actionと統一することで、新しいコンポーネントを作成する際の迷いが減ります。

また、状態を表すModifierも統一しましょう。--active、--disabled、--loading、--errorといった状態は、どのコンポーネントでも同じ意味で使用されるべきです。

保守性を高めるクラス名の設計思想

長期的な保守性を考慮したクラス名設計では、将来の変更に対する耐性を持つことが重要です。見た目に依存しない命名、機能の変更に対応できる抽象性、コンポーネントの独立性を意識した設計が求められます。

見た目に依存しない命名とは、red-buttonではなくbtn--danger、large-textではなくtext--emphasisといった、機能や意味に基づいた命名のことです。これにより、デザインが変更されてもクラス名を変更する必要がありません。

機能の抽象化では、具体的すぎる命名を避けることが大切です。facebook-share-buttonよりもsocial-share-buttonの方が、他のSNSにも対応しやすくなります。同様に、product-gridよりもitem-gridの方が汎用性があります。

コンポーネントの独立性を保つため、親要素に依存した命名は避けるべきです。sidebar-buttonではなくbtn--compactとすることで、同じボタンを他の場所でも使用できるようになります。

変更への対応力を高めるため、段階的な命名体系を採用することも効果的です。text--small、text--medium、text--largeといった相対的なサイズ指定により、デザインシステムの変更に柔軟に対応できます。

バージョニングと互換性

大規模なプロジェクトでは、クラス名にバージョニングの概念を導入することも検討に値します。btn-v2やcard--modernといった命名により、旧バージョンとの互換性を保ちながら新機能を追加できます。

ただし、バージョニングは最後の手段として考えるべきです。まずは、既存のクラス名を拡張する方法や、新しいModifierを追加する方法を検討しましょう。

チーム開発で統一すべき命名ガイドライン

効果的なチーム開発のためには、明文化された命名ガイドラインが必要です。ガイドラインには、使用する命名規則、禁止事項、推奨される単語リスト、例外規則を含めるべきです。

基本的な命名規則として、記法（ハイフン、キャメルケースなど）、最大文字数、使用可能文字、命名パターンを明確に定義します。例えば、「ハイフン記法を使用し、50文字以内で、英数字とハイフンのみ使用可能」といった具体的なルールです。

禁止事項では、使用してはいけない単語や表現を列挙します。略語の乱用、意味のない文字列（例：div1、content-a）、日本語のローマ字表記、見た目に依存した命名などが含まれます。

推奨される単語リストでは、チーム内で統一して使用する英単語を定義します。同じ意味でも複数の表現がある場合（例：imageとpicture）、どちらを使用するかを明確にしておきます。

例外規則では、ガイドラインから外れることが許可される条件を定義します。外部ライブラリとの連携、レガシーコードとの互換性、特殊な技術的要件などが例外の対象となります。

ガイドラインの運用方法

ガイドラインを効果的に運用するためには、定期的な見直しとチーム内での共有が重要です。プロジェクトの進行とともに新しい要件が生まれるため、ガイドラインも進化させる必要があります。

コードレビューの際には、命名規則の遵守を確認項目に含めましょう。自動化できる部分（文字数制限、使用文字の確認など）は、lintツールを活用することで効率化できます。

新メンバーの参加時には、ガイドラインの説明を必須項目とし、サンプルコードを使った実習を行うことで理解を深めます。

よくある命名の間違いとその解決策

実際の開発現場でよく見られる命名の間違いと、それらを避けるための具体的な解決策を紹介します。これらの知識により、品質の高いクラス名を効率的に作成できるようになります。

最も一般的な間違いは、見た目に依存した命名です。red-text、big-button、left-columnといったクラス名は、デザイン変更時に意味が合わなくなってしまいます。解決策として、機能や意味に基づいた命名（text--error、btn--primary、sidebar）を採用しましょう。

略語の不統一も頻繁に見られる問題です。同一プロジェクト内でbtnとbutton、imgとimage、navとnavigationが混在すると、一貫性が損なわれます。チーム内で略語のルールを決め、文書化することで解決できます。

意味のない連番の使用（section1、content2、div3）は、保守性を大幅に低下させます。各要素の役割を明確にし、hero-section、main-content、sidebar-contentといった意味のある名前を付けることが重要です。

過度に長いクラス名（main-content-area-primary-featured-article-title-text）は、可読性を損ないます。適切な階層構造とBEMの活用により、article__title--featuredのような簡潔で意味の明確な命名が可能です。

曖昧な単語の使用（thing、stuff、data、content）は、要素の役割を不明確にします。具体的で説明的な単語（product、user-info、article、description）を選択することで改善できます。