CSSセレクタの命名規則とBEMの基本を徹底解説！初心者にもやさしいCSS設計ガイド

CSSセレクタの命名規則とBEMの基本

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

生徒

「CSSのセレクタ名って、どんな名前をつければいいんですか？」

先生

「いい質問ですね。CSSでは、セレクタ名のルールを決めておくと、コードがとても見やすくなりますよ。」

生徒

「ルールって、具体的にはどんな感じですか？」

先生

「今回は、セレクタの命名規則と『BEM（ベム）』という書き方の基本を、初心者でもわかるように説明しますね！」

1. CSSセレクタとは？なぜ命名ルールが大事なの？

まず「CSSセレクタ」とは、どの部分にスタイルを適用するかを指定するためのキーワードです。HTMLの中の要素に対して、「ここにCSSを適用してね」と伝える役割です。

たとえば、次のように指定します。


<style>
.title {
    color: red;
}
</style>

<h1 class="title">こんにちは</h1>

ブラウザ表示

この場合、class="title"という部分が「セレクタ」で、color: red;というCSSが適用されます。

でも、名前をなんとなく「abc」「box1」などにしてしまうと、どの要素か分かりづらくなってしまいます。

そのため、CSSセレクタには「分かりやすくて再利用しやすい名前」をつけることが重要なのです。

2. よくあるCSSセレクタの命名ルールとは？

CSSのセレクタ名には、以下のような基本ルールを守るのがおすすめです。

英単語でわかりやすく書く（例：button や menu-item）
小文字とハイフン（-）で区切る（例：main-title）
意味のある名前にする（見た目ではなく、役割を表す）

たとえば、次のような書き方がよく使われます。


<style>
.site-header {
    background-color: lightblue;
}
</style>

<div class="site-header">ヘッダーエリア</div>

ブラウザ表示

このようにすると、コードを見ただけで「ここはサイトのヘッダー部分なんだな」とすぐに分かります。

3. CSSの命名がぐちゃぐちゃになるとどうなる？

実は、CSSで名前をてきとうにつけてしまうと、次のような問題が起こります。

どこにどのスタイルが適用されているか分からない
同じ名前がいろんな場所で使われてしまう
レイアウトが崩れても、どのCSSが原因か分からない

そこで登場するのが、「BEM（ベム）」というCSSの命名ルールです。

4. BEM（ベム）とは？CSSセレクタの設計方法を学ぼう

BEM（Block Element Modifier）は、CSSを分かりやすく管理するための命名ルールのことです。英語で書くと「Block（ブロック）・Element（エレメント）・Modifier（モディファイア）」の頭文字を取ってBEMと呼ばれます。

このルールを使うと、どこにどんなCSSが効いているのかがすぐ分かるようになります。

それぞれの意味を見てみましょう。

Block（ブロック）：部品のまとまり。例：card、menuなど
Element（エレメント）：ブロックの中の一部分。例：card__title、menu__item
Modifier（モディファイア）：状態やバリエーション。例：menu__item--active

書き方は下記のようになります。


<style>
.card {
    border: 1px solid #ccc;
    padding: 10px;
}
.card__title {
    font-size: 18px;
    font-weight: bold;
}
.card__text {
    font-size: 14px;
}
.card--highlight {
    background-color: yellow;
}
</style>

<div class="card card--highlight">
  <div class="card__title">カードのタイトル</div>
  <div class="card__text">カードの本文です。</div>
</div>

ブラウザ表示

このように、__（アンダースコア2つ）や--（ハイフン2つ）を使って名前を区切ることで、「どこに属しているCSSか」「どんな状態なのか」がひと目でわかるようになります。

5. BEMのメリットとは？初心者にこそおすすめな理由

BEMのルールを使うと、以下のようなメリットがあります。

CSSがわかりやすく、読みやすい
名前がかぶりにくく、トラブルが少ない
HTMLとCSSの関係がすぐに理解できる
他の人と作業するときも、共有しやすい

特に初心者の方は、CSSで混乱しないようにするためにも、この「BEM」のルールを覚えておくと、とても便利です。

6. どんな名前にすればいい？BEMのネーミング例

ここでは、いくつかのパターンでBEMのネーミング例を紹介します。

button（ボタンの基本） → button
ボタンのテキスト部分 → button__text
ボタンがアクティブ状態 → button--active
メニューのアイテム → menu__item
メニューの見出し → menu__title

名前の中に、要素の「役割」や「状態」が分かるようにするのがコツです。

7. CSSセレクタとBEMで迷わないスタイル設計をしよう

CSSセレクタの命名には正解があるわけではありませんが、ルールを決めておくことで、後から自分で見返しても「これは何のスタイルだったかな？」と迷わずにすみます。

特に「BEM」は、初心者にとってとても使いやすいルールです。プロの現場でも広く使われていて、HTMLとCSSをしっかり整理して書けるようになります。

今後、ウェブページを作るときには「何のためのスタイルか？」を意識して、セレクタに名前をつけてみましょう！

まとめ

ここまでCSSセレクタの基本から命名規則、そしてBEMという構造的なCSS設計方法までじっくり学んできました。CSSのセレクタは単なる名前ではなく、ウェブページ全体の読みやすさや管理のしやすさに直結する大切な要素です。見た目だけでなく、コードの意味や役割がわかりやすくなるように名前をつけておくことで、あとから編集するときに迷いがなくなり、チームで作業する場面でもスムーズに意図が共有できるようになります。特に、HTMLとCSSの関係が複雑になっていくほど、セレクタ名の付け方がページ全体の「設計」と呼べるほど重要になっていきます。

また、BEM（Block Element Modifier）という考え方を取り入れることで、CSSの構造を階層的に捉えることができ、複数のページで同じ部品を扱う際にも誤解が生まれにくくなります。「ブロック」「エレメント」「モディファイア」という三つの概念をきちんと区別することにより、どこが部品の親なのか、どの部分がその構成要素なのか、またどんな状態変化を表すCSSなのかが明確になります。特に、エレメントに当たる部分には親ブロックを示す名前を含めることがBEMでは大切で、これがあることでCSSの見通しがとてもよくなります。階層を意識してHTMLを書く習慣が自然と身につき、CSS全体の整理整頓にもつながっていきます。

命名の際に大切なのは、見た目の印象ではなく「役割」を名前に表現することです。たとえば「赤いボタン」ではなく「送信ボタン」のように、機能や内容を反映した名前をつけることで、スタイルの意味がはっきりし、適用する判断がしやすくなります。見た目が変わっても名前がブレないため、長期的に保守しやすいコードになります。CSSセレクタの命名は慣れるまでは難しく感じるかもしれませんが、今回のようにルールを決めて書いていけば自然と統一感が生まれ、コードの質が高まっていきます。

BEMの書き方では、ブロック名のあとに二つのアンダースコアでエレメントを、二つのハイフンでモディファイアを表現します。このルールを守るだけでも、HTMLとCSSの構造が整理され、どこに何のスタイルが適用されているのか一目で把握できるようになります。特に複雑なデザインを扱う場面では、BEMのルールが大きな助けになります。名前付けがブレないため、CSSに無駄が生まれにくく、後から追加するコードとも衝突しにくくなるのです。ウェブサイトの規模が大きくなればなるほど、こういったルールに沿ったコーディングが大きな力を発揮します。

セレクタ名を工夫してCSSを設計することで、より見やすく、管理しやすく、迷いのないスタイルづくりができるようになります。ウェブ制作の基盤となるCSSセレクタと命名規則は、サイトを作る上で避けて通れない大事なスキルです。今回紹介した内容を参考に、実際の制作現場でも通用する記述方法をぜひ身につけ、より質の高いコードが書けるよう意識して取り組んでいきましょう。

BEMのサンプルコード


<style>
.profile {
    border: 1px solid #ccc;
    padding: 15px;
}
.profile__name {
    font-size: 20px;
    font-weight: bold;
}
.profile__description {
    font-size: 14px;
    margin-top: 8px;
}
.profile--highlight {
    background-color: #f9f7c0;
}
</style>

<div class="profile profile--highlight">
    <div class="profile__name">ユーザー名</div>
    <div class="profile__description">プロフィールの説明テキストです。</div>
</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「BEMの書き方がわかると、CSSがこんなに整理されるんですね。役割がはっきりした名前って大事なんだと感じました。」

先生

「そうですね。意味のある名前をつければ、コードを読むときの迷いが減ります。BEMはその助けになる強力なルールなんですよ。」

生徒

「ブロックとエレメントとモディファイアの違いも理解できました。これからCSSを書くときに意識してみます。」

先生

「いいですね。慣れてくるとコードが自然と整理され、作業がとても楽になりますよ。」

生徒

「今回の内容を参考にして、より読みやすいCSSを書いていきたいと思います！」