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

CSS(シー・エス・エス)

2024.01.022024.01.03

CSSのclass名に使えるルール

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

英数字（a-z、A-Z、0-9）は使用できます。
ハイフン（-）やアンダースコア（_）も使用できます。
ただし、数字で始まるクラス名は避けるべきです。
予約語や特殊文字（スペース、!、”、#、$、%、&、’、(、)、*、+、,、.、/、:、;、<、=、>、?、@、[、\、]、^、`、{、|、}、~）は避けるべきです。

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

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

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

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

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

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

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

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

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

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

予約語と特殊文字： CSSやプログラミングの言語で使用されている予約語や特殊文字は、文法上の目的で既に使われています。クラス名にこれらの文字を含めると、コードが意図した通りに解釈されなくなる可能性があります。
数値で始まるクラス名： CSSでは、数値で始まる識別子は無効です。そのため、数値から始まるクラス名は使用できません。この制約を回避するために、クラス名を適切に設定する必要があります。
スペースや特殊文字： クラス名にスペースや特殊文字を含めると、CSSやJavaScriptなどで要素を選択する際に問題が発生する可能性があります。また、コーディング標準においてもスペースを避け、クラス名を単語ごとに分けるキャメルケースやハイフン区切りなどの規則が一般的です。

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

[rml_read_more]

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

キャメルケース（camelCase）：
- 適切な名前：userInfo
- サンプル：.userProfile, .commentSection
ハイフン区切り（kebab-case）：
- 適切な名前：main-content
- サンプル：.header-menu, .article-list
BEM（Block Element Modifier）：
- 適切な名前：card, card__title, card--highlighted
- サンプル：.button, .button__icon, .button--primary
意味のある名前：
- 適切な名前：navigation, footer
- サンプル：.main-nav, .page-footer
状態を表す名前：
- 適切な名前：active, disabled
- サンプル：.tab-active, .btn-disabled
レスポンシブデザイン：
- 適切な名前：mobile-only, desktop-only
- サンプル：.nav-mobile, .hide-on-desktop
テーマに関連する名前：
- 適切な名前：dark-theme, light-theme
- サンプル：.header-dark, .footer-light
コンポーネントを表す名前：
- 適切な名前：modal, slider
- サンプル：.modal-container, .image-slider
コードの目的を反映する名前：
- 適切な名前：error-message, success-message
- サンプル：.alert-error, .alert-success