デザインデータを見たときに、どう判断してクラス名を決めるべきか、迷わずに決めるための考え方を整理しました。

コンテンツの意味から考える

▼作成デザイン

↓↓↓

❌やりがちな例

<div class="service-list">
  <div class="service-item">
    <img src="〜〜〜〜">
    <h3>WEBサイト制作</h3>
    <p>クライアントが抱える課題やビジネスビジョンを〜…</p>
  </div>
  …
</div>

→list / item など並び方や構造から名前を付けている状態です。
「並び方・構造」からクラス名を付けると、変更に弱く、意図が伝わらず、再利用もしづらくなってしまいます。

⭕️意味から考えた例

<div class="service">
  <img class="service__img" src="〜〜〜〜">
  <h3 class="service__title">WEBサイト制作</h3>
  <p class="service__text">クライアントが抱える課題やビジネスビジョンを〜…</p>
</div>

→「横に並ぶ」「3つある」といった見せ方は考えず、ここでは「サービス内容の説明」という意味から考えました。

【ポイント】これは「何の情報」を伝えるための塊か？を考える

“同じもの”？それとも“別のもの”？

例：同じ見た目の見出し

<h2 class="heading">会社概要</h2>
<h3 class="heading">サービス紹介</h3>

⭕️役割で考える

<h2 class="section-title">会社概要</h2>
<h3 class="article-title">サービス紹介</h3>

見た目が同じだと、同じクラス名を付けたくなりますが、役割が違う以上、同じ名前にはしません。

【ポイント】見た目は同じでも、役割が違えば同じ名前にはしない

Blockにするか、Elementにするか？

要素を見たときに迷いがちなのがBlockにするか、Elementにするか？です。

BEM記法例

以下のようなデザインの場合は

BEM記法の構造でイメージすると下記のようになります。

しかし、もしボタンは他でも使いそうなら、親に引っ張られずに外に出します

【ポイント】「今どこにあるか」ではなく「外に出られるか」で決める

modifierにする／しないの基準

modifierにする例：通常カードとおすすめカード

<div class="card"></div>
<div class="card card--featured"></div>

「おすすめ用の別コンポーネントにした方がいいのでは？」とも思えますが、
別物か？それとも同じものの状態違いか？を考え、外したら元に戻る違いの場合はmodifierにします。

【modifier を使うポイント】

• 同じ役割・同じ構造
• 違いは状態や条件だけ
• 外したら元に戻る

ページ名を使いたくなったときは？

❌ページ名ベース

<section class="company-history">
  <ul>
    <li>1990年 創業</li>
  </ul>
</section>

▲「会社案内ページだから」ページ名を使ったケース

⭕️内容ベース

<section class="timeline">
  <ul class="timeline__list">
    <li class="timeline__item">1990年 創業</li>
  </ul>
</section>

【ポイント】ページではなく「何のコンテンツか」で命名する

深くしたくなった時は？

❌ 深くしすぎ

<div class="card">
  <div class="card__header">
    <h3 class="card__header__title">タイトル</h3>
  </div>
</div>

⭕ 役割を整理

<div class="card">
  <h3 class="card__title">タイトル</h3>
</div>

【ポイント】3階層目が出たら構造を見直す

実装中に迷ったときの判断

実装中に立ち止まったときの判断基準です。

• 単体で使う場合 → Block
• 外したら戻る場合 → modifier
• 並べたいだけの場合 → レイアウト

まとめ

デザインを見るたびに「この名前で合っているか？」と悩むのは、多くの場合 判断基準が曖昧だからです。

まず意味を見る　→　同じか／違うかを判断する　→ 状態かどうかを確認する

この順番が決まっていると、候補が自然に絞られ、迷う時間が減ります。

また、役割や状態が名前に出ているクラスは、書いた本人でなくても、書いた本人も時間が経っても、HTMLを見ただけで「何をしている要素か」が推測できるため、後から見ても意図が分かるようになります。

デザインや体制が違えば、最適な判断も変わりますが、
「どう考えるか」を揃えておくことがレビューや修正の往復を減らすために大切だと考えています。