もう迷わないHTML/CSSのクラス名の付け方完全ガイド！

英語で書く

クラス名は英語で記述するのが一般的です。日本語は避けましょう。また、日本語読み＝ローマ字表記も避けるべきです。英語で統一することで、グループで作成する他の納品先でも意味が伝わりやすくなります。

<!-- 悪い例 -->
<div class="ヘッダー"></div>
<div class="osusume"></div>

<!-- 良い例 -->
<div class="header"></div>
<div class="recommendation"></div>

小文字とハイフン（kebab-case）、またはアンダーバー（snake_case）を使う

クラス名は小文字で記述し、単語の区切りにはハイフンかアンダーバーを使います。特にハイフン（kebab-case）は、CSSやHTMLの一般的な規則として広く採用されています。一方で、アンダーバー（snake_case）も選択肢の一つですが、混在して使うのではなく、プロジェクト全体でどちらかを使う、統一することが重要です。チーム内で命名規則を共有し、すべてのメンバーが一貫して適用することで、コードの可読性と保守性が大幅に向上します。

<!-- 悪い例 -->
<div class="HeaderLogo"></div>

<!-- 良い例（ハイフン使用） -->
<div class="header-logo"></div>

<!-- 良い例（アンダーバー使用） -->
<div class="header_logo"></div>

class名が長すぎるのはちょっと×

過度に詳細な名前は避け、簡潔にまとめることが大切です。詳細すぎる名前はコードの保守性を損ない、読み手にとって理解しにくくなります。一方で、簡潔な名前は直感的で再利用性が高まります。例えば、btn-redという名前は、色（red）とボタン（btn）を簡潔に示し、red-color-buttonのような冗長な名前を避けることで、要素の役割が一目で分かる理想的な命名になります。

<!-- 悪い例 -->
<div class="red-color-button"></div>

<!-- 良い例 -->
<div class="btn-red"></div>

divだけしかつけられないわけじゃないのよ

div要素にクラス名はつけるもの、、ではありません。まずはクラスを付与する際には、sectionやarticleなどのセマンティックなHTML要素を優先的に使用しましょう。これにより、構造が明確になり、SEOやアクセシビリティにも良い影響を与えます。

<!-- 悪い例 -->
<div class="blog-post">
  <div class="blog-post__header"></div>
  <div class="blog-post__content"></div>
</div>

<!-- 良い例 -->
<article class="blog-post">
  <header class="blog-post__header"></header>
  <section class="blog-post__content"></section>
</article>

この記事では便宜上divを例に挙げていますが、セマンティック要素が適していない場合に限り、divを使用しましょう。

class名には役割があります。曖昧な名前はつけない

wrapperやcontainerといった名前は、明確な役割がある場合には適切ですが、漠然とした用途で使われると混乱の元になります。

• wrapperの用途は通常、特定の要素を囲むコンテナとして使われます。例えば、全体のレイアウトを中央に揃える場合や、複数の要素をグループ化するために使用されます。
• containerの用途: 中央寄せや、レイアウトの幅を制御するための要素として使われます。

<!-- 良い例 -->
<div class="wrapper">
  <div class="header">Header Content</div>
  <div class="main-content">Main Content</div>
</div>

<!-- この場合、wrapperはレイアウト全体を囲む役割が明確です -->

<!-- 悪い例 -->
<div class="wrapper">
  <p>Unclear usage</p>
</div>
<!-- 用途が明確でない場合には避けるべきです -->

このサンプルコードでは、BEM（Block Element Modifier）も使っています。BEM（Block Element Modifier）は、CSSクラス命名規則の一つで、読みやすく、メンテナンスしやすいスタイルを書くための方法です。

• 可読性の向上：BEMのクラス名は、構造と役割が明確です。クラス名を見るだけで、どのブロックに属する要素なのか、どのような役割を持っているのかがわかります。例: header__logo は、headerブロック内の logoエレメントであることを示しています。
• 衝突の回避：クラス名が一意に設計されているため、他のスタイルと競合しにくくなります。例: feature__title と hero__title は異なるブロックに属しているため、スタイルが衝突しません。
• 保守性の向上：BEMを使うことで、変更箇所が限定的になり、影響範囲を最小限に抑えることができます。例: footer__textのスタイルを変更しても、他のブロックに影響を与えません。

Block（ブロック）

• 独立した再利用可能なコンポーネントを表します。
• 例: header, hero, footer など。

Element（エレメント）

• ブロックの中に含まれる構成要素を表します。
• __（ダブルアンダースコア）でブロック名とエレメント名を繋げます。
  • 例: header__logo（headerブロック内のlogo要素）