スキルアップを始める

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

CSS(シー・エス・エス)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

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などで要素を選択する際に問題が発生する可能性があります。また、コーディング標準においてもスペースを避け、クラス名を単語ごとに分けるキャメルケースやハイフン区切りなどの規則が一般的です。

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

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

[rml_read_more]

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

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

これらのサンプルは、クラス名が読みやすく、コードの目的や構造を明確に伝えるのに役立ちます。プロジェクト内で一貫性を保ち、開発者が理解しやすいクラス名を選ぶことが大切です。

まとめ

CSSのクラス名は、意味があり、他の開発者が理解しやすいものを選ぶことがポイントです。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら