CSSスタイルシートではいつclassを使い、いつidを使うのか？

CSSスタイルシートでは、いつ id を使い、いつ class を使うべきでしょうか。単純な原則は、Webページの構造上、本当に一意な部分には id を使い、再利用できるスタイルや細かな装飾には class を使う、というものです。同時に、すべての要素に id や class を付ける必要はありません。継承、要素セレクター、構造セレクターを使うべき場面では、CSSが自然に継承し、マッチするようにします。要するに、id と class の数は、できるだけ少なく、分かりやすく保つべきです。

ID & Class

ID

id は1つのHTML文書内で一意であるべきで、重複してはいけません。ページ上に一度だけ現れる要素、たとえばメインナビゲーション、フッター、特定のフォーム入力欄、ページ内アンカーなどを識別するのに向いています。

よくある用途は次のとおりです。

  • ページ内アンカー：<section id="comments">
  • フォームの関連付け：<label for="email"> が <input id="email"> に対応する
  • JavaScriptで特定の一意な要素を正確に探す
  • #header、#main、#footer のような少数のページレベルの構造識別子

ただし、CSSを書くときに「より正確に選択したい」という理由だけで id を大量に使うべきではありません。id セレクターは詳細度が高いため、後からスタイルを上書きするのが面倒になりがちです。多くの場合、class のほうが柔軟です。

Class

class は繰り返し使用できます。ある種類のスタイル、状態、または再利用可能なコンポーネントを表すのに向いています。たとえばボタン、通知ボックス、赤い文字、現在選択中の項目などです。

よくある用途は次のとおりです。

  • 再利用可能なスタイル：.button、.red、.muted
  • コンポーネントのスタイル：.card、.nav-item、.post-title
  • 状態のスタイル：.active、.disabled、.error
  • 複数の要素で同じ見た目を共有する場合

同じ要素に複数のclassを同時に付けることもできます。

<p class="message error">请输入正确的邮箱地址。</p>

こうすると、共通スタイルと状態スタイルを分けて書けます。

.message {
  padding: 8px 12px;
}

.error {
  color: #c00;
}

例

次の例では、#red はページ内の1つの要素だけに対応すべきですが、.red は複数の要素で繰り返し使えます。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>ID 与 Class 示例</title>
  <style>
    #red {
      color: #f00;
    }

    .red {
      color: #f00;
    }
  </style>
</head>
<body>
  <p id="red">id</p>
  <p class="red">class</p>
  <p class="red">class2</p>
</body>
</html>

実際に選ぶときの目安

ある要素がページ内に一度しか現れず、アンカー、フォームの関連付け、またはスクリプトからの参照対象として必要な場合は、id の使用を検討できます。単にスタイルを適用したいだけなら、まず class を使うのがよいでしょう。

複数の要素で同じスタイルを共有したい場合は、class を使うべきです。たとえば複数の段落を赤い文字にしたいなら、それぞれに別々の id を書くのではなく、.red を統一して使います。

要素自体を構造から明確に選択できる場合は、追加のclassを付ける必要がないこともあります。

.article h2 {
  margin-top: 2em;
}

.article p {
  line-height: 1.8;
}

このほうが、すべての見出しや段落にclassを付けるよりもすっきりします。

簡単にまとめると、次のようになります。

  • id：一意、少なめに使う、アンカーや正確な位置指定に向いている。
  • class：繰り返し使用できる、よく使う、スタイルの再利用に向いている。
  • CSSは分かりやすく書くほどよいのであって、id や class が多ければよいわけではない。

Leave a Reply