はじめに
HTMLコーディングにおいて、クラス名ってどうしていますか？全部の要素につけていますか？それとも、大枠だけですか？
基本的に小規模であれWEBサイトのコーディングをするなら、「bodyタグ内のすべての要素にクラスを付ける」というアプローチがおすすめです。
なぜ「すべての要素」にクラスを付けるのか？
理由は大きく分けて2つあります。
それは、HTMLの品質向上と将来へのスキル投資です。
1. HTMLが「構造を持ったドキュメント」になる
クラス名が付与されていないHTMLは、どうしても単なるタグの羅列になりがちです。
一方で、すべての要素に適切なクラス名（例：about-title、author-name、news-date）が付いていれば、CSSを見なくてもHTMLだけで要素の役割が理解できます。
それから、ここはクラス名をつけるのか。ここはつけないのか。その選択肢を無くすことでもあります。選択肢が少なくなればそれだけスピードが上がります。
2. BEM・FLOCSS、そしてコンポーネント指向への布石
ここが、最も重要なポイントです。
BEM / FLOCSSの基礎体力になる
BEM（Block, Element, Modifier）やFLOCSSといったCSS設計手法は、クラスを前提として構造を管理する思想です。
特にBEMでは、親要素（Block）の内部に存在する子要素（Element）すべてに、明確な命名を行います。
つまり、
「すべての要素に名前を付ける」という習慣そのものが、CSS設計の基礎体力になります。
コンポーネント指向への接続
ReactやVue.jsなどのフレームワークでは、UIを「コンポーネント」という単位で設計します。
コンポーネント内部の要素は、すべてそのコンポーネントの責務として振る舞います。
「この要素は、何の役割を持つパーツなのか？」
そう問い続けながら命名する習慣は、コンポーネント設計そのもののトレーニングになります。
CSSフレームワークへの適応
Utility FirstなCSSフレームワークも、本質的にはすべての要素にクラスを書いていくスタイルです。
HTMLに多くのクラスを書くことに抵抗がない状態を作っておくことは、モダンな開発環境への適応力を高めてくれます。
実践ルール：構造を語るクラス名
では、具体的にどのようなルールでクラスを付けていけばよいのでしょうか。
基本ルール
- 命名規則：ケバブケース（
kebab-case）を使用する - 対象範囲：
bodyタグ内の要素には、ごく一部の例外を除き、すべてクラスを付ける - 意味付け：見た目（
red-text）ではなく、役割（error-message）を表す名前にする
コード例
<!-- 悪い例：構造が見えにくい -->
<div class="card">
<h3>タイトル</h3>
<p>説明文です。<a href="#">リンク</a></p>
<img src="icon.png" alt="">
</div>
<!-- 良い例：役割が明確 -->
<div class="feature-card">
<h3 class="feature-card-title">高速なパフォーマンス</h3>
<p class="feature-card-description">
最適化されたコードにより…
<a href="#" class="feature-card-link">詳細を見る</a>
</p>
<img src="icon-speed.png" alt="" class="feature-card-icon">
</div>後者の例では、feature-card というブロックの中に、どのような要素が存在しているのかが、HTMLを読むだけで明確に把握できます。
例外ルール
「すべて」と言いましたが、設計の一貫性を保つために、例外も存在します。
1. br タグ
br タグは、構造を表す要素ではなく、単なる改行を目的としたタグです。
そのため、構造的な意味を持たせる必要はなく、原則としてクラスは不要です。
ただし、sp-only や pc-only のように、表示条件を切り替える目的を持つヘルパークラスを付与するケースはあります。
この場合、クラスは要素の役割を表すものではなく、振る舞いを制御するための補助的な役割を担います。
2. iframe タグ
動画埋め込みなどでは、まず Wrapper（親要素） を起点にレイアウトを制御する設計が一般的です。
この点は img タグと同様で、iframe 自体の役割は文脈上すでに明確なため、必ずしもクラスを付ける必要はありません。
また、iframe は Google Maps や YouTube など、外部サービスが提供するコードをそのままコピー＆ペーストして使用するケースが多く、その場合はクラスを追加しないことも少なくありません。
<div class="youtube-embed-wrapper">
<iframe src="..." allowfullscreen></iframe>
</div>必要に応じて iframe 本体に width: 100% や height: auto、aspect-ratio などを指定したい場合でも、Wrapper 側を起点に制御する設計を基本とすると、構造が崩れにくくなります。
この場合、Wrapperには必ずクラスを付けるようにしましょう。
3. img タグ
基本的にはクラスを付けることを推奨します。
ただし、画像表示専用のコンテナで役割が明確に限定されている場合、その直下の img は文脈が明らかなため、省略しても問題ありません。
もっとも、CSS設計の観点からは、クラスを付けておく方が安全です。
まとめ
「すべての要素にクラスを付ける」という考え方は、最初は手間に感じるかもしれません。
しかしそれは、
「とりあえず動けばいいコード」から、
管理しやすく、読みやすいプロフェッショナルなコードへ進むための第一歩です。
未来の大規模開発やチーム制作に備えて、まずは日々の小さな制作物の中で、この習慣を意識してみてください。
