CSSのclass名に使える文字は？適切なクラス名とそのサンプル

CSSのclass名に使えるルール

CSSのクラス名には、ほとんどのUnicode文字が使用できます。ただし、いくつかのルールがあります。

1. 英数字（a-z、A-Z、0-9）は使用できます。

2. ハイフン（-）やアンダースコア（_）も使用できます。

3. ただし、数字で始まるクラス名は避けるべきです。

4. 予約語や特殊文字（スペース、!、”、#、$、%、&、’、(、)、*、+、,、.、/、:、;、<、=、>、?、@、[、\、]、^、`、{、|、}、~）は避けるべきです。

例えば、次のようなクラス名は有効です。

.my-class {
  /* スタイルの定義 */
}

.my_class {
  /* スタイルの定義 */
}

.myClass {
  /* スタイルの定義 */
}

.m123 {
  /* スタイルの定義 */
}

避けるべきクラス名

ただし、以下のようなクラス名は避けるべきです。

.123class {
  /* 避けるべき */
}

.my class {
  /* 避けるべき（スペースを含む） */
}

.my-class! {
  /* 避けるべき（特殊文字を含む） */
}

クラス名に特定の文字やパターンを避ける理由は、主に次の点が挙げられます：

1. 予約語と特殊文字： CSSやプログラミングの言語で使用されている予約語や特殊文字は、文法上の目的で既に使われています。クラス名にこれらの文字を含めると、コードが意図した通りに解釈されなくなる可能性があります。

2. 数値で始まるクラス名： CSSでは、数値で始まる識別子は無効です。そのため、数値から始まるクラス名は使用できません。この制約を回避するために、クラス名を適切に設定する必要があります。

3. スペースや特殊文字： クラス名にスペースや特殊文字を含めると、CSSやJavaScriptなどで要素を選択する際に問題が発生する可能性があります。また、コーディング標準においてもスペースを避け、クラス名を単語ごとに分けるキャメルケースやハイフン区切りなどの規則が一般的です。

クラス名にこれらの原則を守ることで、コードが読みやすく、他の開発者との協力がしやすくなります。また、技術的な問題を回避し、一貫性のあるコーディングスタイルを維持することができます。

適切なクラス名とそのサンプル

クラス名を適切に命名することはコーディングの重要な側面です。以下は、適切なクラス名とそのサンプルです。

続きはこちら
https://eguweb.jp/css/70300/