Web制作で迷わないための命名ルールと構造設計のガイド

BEM / inner / wrap / cards の迷いを解消する実践ガイド

Web制作をしていると、
「クラス名どうしよう…」
「inner と wrap の役割ってどこまで？」
「cards と block__cards の違いは？」
など、構造をどう設計するかで手が止まる場面がある。

この記事では、そうした“迷いやすい部分”を
明確な判断基準として言語化し、
仕事でそのまま使える形で整理した。

※このページでは概念を分かりやすくするため、
<cards> などの擬似タグを使用しています。
実際は <div class="cards"> のように記述します。

1. クラス名で迷うのは「正解がない領域」だから

BEMやCSS設計における命名は明確な正解がない。
だからこそ迷いやすいし、
美意識が高いほど「統一したくなる」感覚も強くなる。

問題は、

その場で感覚的に命名する
ルールが曖昧で揺れる
inner と wrap の使い分けが曖昧
cards を汎用にするか BEM にするか迷う

ことによって、手が止まる時間が増えること。

この記事ではこれを 迷わない基準 に落としこむ。

まず最も大事な前提、

2. inner と wrap は役割が違う（役割ベースで判断する）

inner の役割

ブロックの最大幅・左右余白・中央寄せのみ担当
1ブロックにつき1回だけ使用
ブロック直下に置く

<block>
  <block__inner>
    ...
  </block__inner>
</block>

inner は “レイアウトの外枠の器” と覚える。

wrap の役割

要素をグループ化するための箱
Flex / Grid を適用する
内容が複雑でもまとめるために使う
inner の中に置くのが最適

<block>
  <block__inner>
    <block__wrap>
      …
    </block__wrap>
  </block__inner>
</block>

wrap は“意味を持たない整理箱” と覚える。

3. cards / texts の使い分け

意味を持つ集合 → 複数形（cards/texts）

意味を持たない箱 → wrap

cards（汎用）を使うケース

一般的なカード一覧
再利用したいUI
blog一覧、LPのメリット一覧など

<cards>
  <card></card>
  <card></card>
</cards>

block__cards（固有）を使うケース

そのブロック専用の “特別なカード”
デザインが独自
文脈依存の見た目・レイアウト

<price>
  <price__cards>
    <price__card></price__card>
    <price__card></price__card>
    <price__card></price__card>
  </cards price__cards>
</price>

4. 迷ったときに判断する超シンプルなルール

① このブロックだけで使う → block__cards（BEM専用）
② 他の場所でも使う可能性がある → cards--○○（汎用modifier）
③ 最初は block__cards でOK。2回出てきたら cards–○○ に昇格。

これが最も実用的で、迷いがゼロに近づく。

5. inner → wrap → cards の“揺れない階層構造”

最も安定して、どんな案件にも流用できる構造の基本形はこれ。

<block>
  <block__inner>

    <block__header>
      <block__title></block__title>
    </block__header>

    <block__contents>

      <block__wrap>
        <cards>
          <card></card>
          <card></card>
          <card></card>
        </cards>

        <texts>
          <text></text>
          <text></text>
          <text></text>
        </texts>
      </block__wrap>

      <block__wrap>
        <cards>…</cards>
        <texts>…</texts>
      </block__wrap>

    </block__contents>

  </block__inner>
</block>

ポイントは：

inner はブロック直下に1つ
wrap は inner 下の“整理箱”
cards/texts は“意味のある集合”として配置
BEM で使うときは block__cards に変更
汎用として設計するなら cards のままでOK

この型があれば、一生迷わない。

6. modifier と block__cards の使い分け

悩みがちなポイントだが、

`block__cards` が向いている場合

ブロック限定のデザイン
特殊な背景/余白/影
他のcardsと混ぜると混乱する
そのブロックの文脈で意味が決まる

`cards--block`（modifier）が向いている場合

汎用cardsをベースに少しだけ変える
他のセクションでも同じ調整があり得る
再利用できるスタイル
cards自体の発展形にしたい

迷ったらこうする

まずは “固有” として block__cards にする。
同じ変化を2回以上見かけたら cards–○○ に昇格。

これで命名の迷いはほぼ無くなる。

7. 最後に：命名で迷わないための全体戦略

inner → レイアウト外枠
wrap → 整理箱
意味のある集合 → cards/texts
汎用か固有かで命名を決める
再利用したければ modifier で派生
迷ったら block__cards として開始
2回目に同じ構造が出たら汎用化

これだけで、制作のスピードとコードの品位が大きく上がる。

これらのルールは、
案件ごとに構造やデザインが変わる制作会社の外注コーダーにとって特に強い武器になる。

8. クラス名はどこまで付ければいい？（役割ベースで判断する）

クラス名を付ける・付けないの判断で迷ったら、「その要素が何を担当しているか」だけを見ると迷わなくなる。

クラスを付けるべき要素

装飾がある（padding / background / border / shadow など）
UIとして意味を持つ（まとまり・1単位の項目）
JSで操作する
レイアウトの主役になる（flex/grid の対象、順序が変わる etc）

→ 役割がある＝クラス必須。

クラスを付けなくて良い要素

ただの箱（中継地点）
wrap や grid の“子として並ぶだけ”
親のクラスで見た目や配置が完結する
文脈的な意味を持たない

→ 役割がない＝クラス不要。

例：card 内の grid の子要素

<card>
  <card__wrap>
    <div>…</div>
    <div>…</div>
    <div>…</div>
  </card__wrap>
</card>

子の <div> が“並ぶだけ”ならクラス不要。
意味や装飾が生まれたタイミングで card__item を付ける。

この記事のまとめ

構造設計のブレがなくなるだけで、

コーディングの思考負荷が激減
レビューが通りやすくなる
スピードが上がる
自分のコードに一貫性が出る

というメリットがある。