◀ 3.

BEM 命名規則

▶

編集

この記事の要点

クラスセレクタは .classname の形でドットに続けて HTML の class 属性値を書く CSS セレクタ
同じクラス名を持つすべての要素に同じスタイルを当てられる（複数要素への一括適用に最適）
要素名.classname で特定の要素タイプに絞り込み、.a.b で両方持つ要素のみ選択
詳細度は 0,1,0。ID（0,1,0,0）より弱く、要素セレクタ（0,0,0,1）より強い
実務では BEM（.block__element--modifier）など命名規則で衝突を避ける

クラスセレクタとは

クラスセレクタは、HTML の class 属性値を CSS から指定するためのセレクタです。ドット（.）に続けてクラス名を書き、その値を持つすべての要素にスタイルを適用します。

同じ class 値は1 つのページ内で何度でも使えるため、ボタン・カード・見出しといった繰り返し使うパーツのスタイル定義に向いています。

基本構文

/* .subtitle クラスが付いた要素すべてに適用 */
.subtitle {
  color: #fff;
  font-size: 14px;
}

<h2 class="subtitle">小見出し</h2>
<p class="subtitle">補足テキスト</p>
<div class="subtitle">どの要素でも適用される</div>

記法のバリエーション

セレクタ	意味
`.btn`	`class="btn"` を持つすべての要素
`p.subtitle`	`<p class="subtitle">` のみ（要素を絞る）
`.btn.primary`	`btn` と `primary` を両方持つ要素
`.btn .icon`	`.btn` の子孫にある `.icon`
`.btn > .icon`	`.btn` の直接の子の `.icon`
`.btn, .link`	`.btn` または `.link`（カンマで OR）

HTML 側で複数クラスを付ける

class 属性はスペース区切りで複数のクラスを指定できます。これにより機能の重ね合わせ（基本ボタン + 配色バリアント）が表現できます。

<button class="btn primary">保存</button>
<button class="btn danger">削除</button>

.btn          { padding: 8px 16px; border-radius: 4px; }
.btn.primary  { background: #3498db; color: #fff; }
.btn.danger   { background: #e74c3c; color: #fff; }

詳細度（Specificity）

セレクタの優先度は (インライン, ID, クラス, 要素) の 4 桁で計算されます。クラスセレクタはクラスの桁を 1 つ増やします。

セレクタ	詳細度
`p`	0,0,0,1
`.subtitle`	0,0,1,0
`p.subtitle`	0,0,1,1
`.btn.primary`	0,0,2,0
`#header`	0,1,0,0
`style="..."`（インライン）	1,0,0,0

ID セレクタとの使い分け

セレクタ	記法	用途
クラス	`.name`	繰り返し使えるパーツのスタイル
ID	`#name`	ページ内で1 回だけの要素

実務では CSS は基本クラスセレクタで書き、ID はリンクのアンカーや JavaScript の参照に取っておく方針が主流です。

命名規則：BEM

クラスが増えると衝突や上書きでカオスになりがちです。BEM（Block / Element / Modifier）はクラス名を以下のように構造化する命名規則です。

<div class="card">
  <h2 class="card__title">タイトル</h2>
  <p class="card__body">本文</p>
  <button class="card__button card__button--primary">OK</button>
</div>

Block（.card）— 独立した部品
Element（.card__title）— Block の構成要素。__ で繋ぐ
Modifier（.card__button--primary）— 状態 / バリアント。-- で繋ぐ

属性セレクタとの違い

記法	マッチ条件
`.foo`	`class` に `foo` を含む（スペース区切り）
`[class="foo"]`	`class` が完全一致で `foo`
`[class~="foo"]`	`.foo` と同じ意味（スペース区切りで含む）

まとめ

クラスセレクタは .name で class 属性を狙う
同じクラスは複数要素に付けられ、一括スタイル変更に最適
.a.b で複数クラス AND、.a, .b でOR
詳細度は 0,0,1,0。ID より弱く、要素より強い
BEM などの命名規則で衝突を予防する

疑似クラスと組み合わせる

クラスセレクタは :hover や :nth-child(...) などの疑似クラスと自由に組み合わせられます。これによりホバーやフォーカス、特定位置の要素だけにスタイルを当てられます。よく使う組み合わせを挙げます。

セレクタ	意味
`.btn:hover`	マウスオーバー時の `.btn`
`.input:focus`	フォーカス時の `.input`
`.list-item:nth-child(odd)`	奇数番目の `.list-item`（ゼブラストライプ）
`.menu li:first-child`	`.menu` 内の最初の `li`
`.btn:not(.disabled)`	無効化されていない `.btn` だけ

子孫セレクタ・直接子セレクタ・隣接セレクタ

クラスは単独で書くだけでなく、結合子と組み合わせて DOM 構造を絞り込めます。よく使う 4 種類を整理します。

結合子	例	意味
スペース（子孫）	`.card .title`	`.card` の子孫の `.title`
`>`（直接子）	`.card > .title`	`.card` の直接の子の `.title`
`+`（隣接兄弟）	`.title + .desc`	`.title` の直後の兄弟の `.desc`
`~`（一般兄弟）	`.title ~ .desc`	`.title` 以降の同じ親内のすべての兄弟の `.desc`

JavaScript からクラスを操作する

状態（開閉 / 選択 / エラー）に応じてクラスを付け外しすると、スタイルと挙動を分離できます。classList API を使うのが現代的です。

const el = document.querySelector('.menu');
el.classList.add('is-open');       // 追加
el.classList.remove('is-open');    // 削除
el.classList.toggle('is-open');    // 反転
el.classList.contains('is-open');  // 判定

状態クラスの命名

慣習	意味
`.is-active` / `.is-open` / `.is-disabled`	状態（state）クラス。動的に付け外し
`.has-error` / `.has-icon`	修飾（含む）
`.js-trigger` / `.js-modal`	JavaScript 専用フック（スタイル非依存）

ページ一覧

その他