CSS変数の命名規則と設計指針を完全ガイド！BEMやSMACSSとの併用術

CSS変数の命名規則と設計指針（BEMやSMACSSとの併用）

先生と生徒の会話形式で理解しよう

生徒

「CSS変数の名前にルールってありますか？自分で適当に名前を付けていたら、後から何の色かわからなくなってしまいました。」

先生

「それは大切な気づきですね。CSS変数は、BEMやSMACSSといった有名な整理ルールと組み合わせることで、もっと使いやすくなるんですよ。」

生徒

「ベム？スマックス？なんだか難しそうな単語が出てきましたが、初心者でも覚えられますか？」

先生

「大丈夫です！要はお片付けのルールのようなものです。誰が見てもどこに何があるか分かるようにするコツを解説しますね。」

1. CSS変数の名前付けで失敗しないための基本

CSS変数（カスタムプロパティ）を使い始めると、つい「--color1」「--size-a」のように、その場限りの適当な名前を付けてしまいがちです。しかし、ウェブサイトが大きくなってくると、どの変数がどこの場所を指しているのか、自分でも分からなくなってしまいます。

これを防ぐための第一歩が「命名規則（めいめいきそく）」です。命名規則とは、名前に一定のルールを持たせることです。たとえば、色なら必ず「--color-」から始める、余白なら「--space-」から始めると決めておくだけで、変数のリストを見たときに中身が想像しやすくなります。パソコンに慣れていない方は、まず「自分専用の辞書を作る」ような感覚で、名前のルールを統一することから始めてみましょう。

2. BEM設計とCSS変数を組み合わせるメリット

BEM（ベム）とは、「Block（ブロック）」「Element（エレメント）」「Modifier（モディファイア）」の頭文字を取った、CSSの世界でとても有名な整理整頓のルールです。ブロックは「部品」、エレメントは「その中の要素」、モディファイアは「色違いなどのバリエーション」という意味です。

このBEMの中にCSS変数を組み込むと、部品ごとの管理が劇的に楽になります。たとえば、カード型の部品があったとして、そのカード専用の色を変数にしておくのです。こうすることで、他の場所に影響を与えずに、そのカードの色だけを自由に変えることができるようになります。これは、大きな家の中で「子供部屋専用の照明スイッチ」を作るようなもので、家全体の電気を消さずに、特定の部屋だけを調整できる便利さがあります。


<style>
	/* BEMの考え方を使ったカード部品の変数設計 */
	.c-card {
		--c-card-bg: #ffffff;
		--c-card-border: #dddddd;
		background-color: var(--c-card-bg);
		border: 2px solid var(--c-card-border);
		padding: 15px;
		border-radius: 5px;
	}

	/* 色違いのバリエーション（Modifier） */
	.c-card--alert {
		--c-card-bg: #fff5f5;
		--c-card-border: #ff0000;
	}
</style>

<div class="c-card">
	<p>これは標準のカードです。</p>
</div>

<div class="c-card c-card--alert">
	<p>これは警告用のカードです。</p>
</div>

ブラウザ表示

3. SMACSSの考え方で変数をフォルダ分けする

SMACSS（スマックス）は、CSSを「ベース」「レイアウト」「モジュール」「状態」「テーマ」という5つの役割に分けて管理する考え方です。これをCSS変数に応用すると、頭の中がとてもスッキリします。

たとえば、サイト全体で使う「基本の色」はベース変数のフォルダに入れ、特定の「ボタンの色」はモジュール変数のフォルダに入れる、というイメージです。プログラミング未経験の方は、料理の材料を「肉」「野菜」「調味料」と分けて冷蔵庫に入れる様子を想像してください。必要なときに必要な場所を探せばいいので、迷子になることがなくなります。 SMACSSを意識して変数を分けることで、修正したい場所がすぐに見つかる、メンテナンス性の高いサイトが作れます。

4. サイト全体の共通設定はルートで定義しよう

どこでも使える共通の変数は、一番上の大元である「:root（ルート）」にまとめます。ここには、ロゴの色やサイトのメインカラー、共通の余白サイズなどを置いておきます。

初心者の方がやりがちなミスは、あちこちの場所に同じような色を何回も書いてしまうことです。まずは「ルート」という大きな倉庫にすべての材料を保管し、各パーツはそこから材料を借りてくる、という流れを意識しましょう。倉庫の材料を一つ入れ替えるだけで、家中のパーツの色が同時に変わる快感は、この設計指針を守っているからこそ味わえるものです。


<style>
	:root {
		/* サイト全体で使う「共通倉庫」の変数 */
		--brand-blue: #0044cc;
		--main-spacing: 20px;
	}

	.header {
		background-color: var(--brand-blue);
		padding: var(--main-spacing);
		color: white;
	}

	.footer {
		border-top: 5px solid var(--brand-blue);
		padding: var(--main-spacing);
	}
</style>

<div class="header">共通の青色を使ったヘッダー</div>
<div class="footer">共通の青色を使ったフッター</div>

ブラウザ表示

5. スコープという概念で変数の影響範囲を絞る

「スコープ」という言葉は難しく聞こえますが、要は「影響が及ぶ範囲」のことです。すべての変数を「:root」に置いてしまうと、サイトが巨大になったときに倉庫がパンクしてしまいます。

そこで、特定の部品の中だけで使う変数は、その部品の括り（クラス名）の中に書くようにします。これを「ローカル変数」と呼びます。自分の部屋の模様替えをしてもリビングには影響がないように、部品の中だけで変数を完結させることで、他を壊す心配なく自由にデザインを変更できるようになります。安全に作業を進めるためには、この「範囲を絞る」という考え方が非常に重要です。

6. 意味を込めた名前付けで誰にでも伝わるコードに

変数の名前を付けるときは、その色が「どんな役割か」を英語で表すのが一般的です。たとえば背景なら「bg（バックグラウンド）」、文字の色なら「text（テキスト）」、枠線なら「border（ボーダー）」といった単語を使います。

「--text-primary」とすれば「一番重要な文字色」という意味になります。パソコンの操作に自信がない方も、まずは短い英単語から組み合わせてみましょう。「名前を見れば使い道がわかる」状態にすることが、プロフェッショナルなコードへの第一歩です。自分以外の人があなたのコードを見たとき、迷わず作業を引き継げるような、思いやりのある名前付けを心がけましょう。


<style>
	.u-text-center {
		/* 役割が明確な名前の変数 */
		--text-main-color: #333333;
		--text-sub-color: #777777;
		
		color: var(--text-main-color);
		text-align: center;
	}

	.u-text-center span {
		color: var(--text-sub-color);
		font-size: 0.8em;
	}
</style>

<div class="u-text-center">
	<p>メインの文章です。</p>
	<span>※これは補足の文章です。</span>
</div>

ブラウザ表示

7. パソコン初心者でも安心！全角と半角の罠を回避

設計指針をしっかり守っていても、たった一箇所のミスで表示が崩れてしまうことがあります。それが「全角と半角」の混同です。プログラミングの命令はすべて「半角英数字」でなければなりません。

特に間違いやすいのが、変数を繋ぐ「-（ハイフン）」や、値の終わりの「;（セミコロン）」です。これらが全角の「－」や「；」になっていると、ブラウザは「そんな言葉は知りません」と無視してしまいます。キーボードの「半角/全角」キーをしっかり確認し、英単語を入力するモードで書く習慣をつけましょう。もし上手くいかないときは、まずはこの一文字の違いを疑ってみるのがコツです。

8. 設計をさらに盤石にするエイリアスの活用法

「エイリアス」とは、日本語で「別名」という意味です。たとえば「--color-blue-500: #0000ff;」という色の変数に、「--main-theme: var(--color-blue-500);」という別名を付けます。

なぜこんな面倒なことをするかというと、メインの色を「青」から「赤」に変えたくなったときに便利だからです。「メインテーマの色を赤に変更する」という一行を書き換えるだけで、青を使っていた場所がすべて赤に切り替わります。このように、色そのものの名前と、役割の名前を二段階で分ける手法は、プロの現場でも非常によく使われる設計指針です。

9. コメントを残して未来の自分を助けよう

どれほど完璧な命名規則を作っても、時間が経てば忘れてしまうものです。そのため、変数を定義した場所のすぐ近くに、日本語で「/* ここはヘッダーの背景色 */」のようなメモを残しておきましょう。

この「/* */」で囲まれた部分はコメントと呼ばれ、ブラウザの表示には影響しません。自分だけが見ることができる「秘密の付箋」のようなものです。設計指針とは、技術的なルールだけでなく、こうした「誰が読んでも分かる工夫」を含めて完成します。未来の自分が困らないように、今のうちに丁寧な説明を書き添えておきましょう。


<style>
	:root {
		/* 【色設定】ブランドのメインカラー */
		--p-brand-color: #28a745;
		/* 【余白設定】標準的なコンテンツの隙間 */
		--p-layout-gap: 30px;
	}

	.c-message {
		background-color: #f0fff4;
		border-left: 5px solid var(--p-brand-color);
		padding: var(--p-layout-gap);
		font-family: sans-serif;
	}
</style>

<div class="c-message">
	コメント入りのコードは、後から見ても設計意図がすぐにわかります。
</div>

ブラウザ表示

2026年最新スキルアップ・実践セミナー