CSSクラス名の命名規則

CSS クラス名/セレクタで有効な文字について (日本語解説)

CSSにおいて、クラス名やセレクタに使用できる文字には制限があります。以下にその規則を説明します。

有効な文字

• アンダースコア
  _
• ハイフン
  -
• 英数字
  A-Z、a-z、0-9

• 波括弧
  {}
• 角括弧
  <>
• 括弧
  ()
• セミコロン
  ;
• コロン
  :
• 引用符
  ' "
• スペース
  空白文字

具体的な例

• 無効なクラス名
  
  • my class
  • class:hover
  • class(1)
• 有効なクラス名
  
  • _private-class
  • class123

注意点

• 予約語を使用することは避けてください。
• クラス名は 重複しないように命名してください。
• クラス名やセレクタは 大文字と小文字が区別されます。

CSS クラス名の命名規則と例 (日本語解説)

命名規則

• 予約語の回避
  CSSの予約語（例えば、display、float、positionなど）は使用できません。
• アンダースコアの使用
  プライベートなクラスや内部的な要素には、アンダースコアで始まる名前を付けることができます。
• ハイフンで区切る
  複数の単語を含むクラス名は、ハイフンで区切ります。
• 意味のある名前
  クラス名には、その要素の役割や機能を反映する名前を付けます。

例

意味のある名前

.button {
  /* ボタンのスタイル */
}

.nav-menu {
  /* ナビゲーションメニューのスタイル */
}

ハイフンで区切る

.error-message {
  /* エラーメッセージのスタイル */
}

.product-list {
  /* 商品リストのスタイル */
}

アンダースコアの使用

._private-class {
  /* プライベートなクラス */
}

._internal-element {
  /* 内部的な要素 */
}

予約語の回避

/* 無効なクラス名 */
.display {
  /* display は予約語です */
}

命名規則の利点

• 再利用性
  汎用的なクラス名は、複数の場所で再利用することができます。
• メンテナンス性
  クラス名が適切に命名されていると、コードの変更や修正が容易になります。
• 可読性
  意味のある名前を使用することで、コードが読みやすくなります。

BEM (Block Element Modifier)

• 修飾子
  ブロックや要素の状態やバリエーションを表します。
• 要素
  ブロック内の子要素や依存要素を指します。
• ブロック
  独立したコンポーネントや要素を指します。

例

.button {
  /* ボタンのブロック */
}

.button__icon {
  /* ボタン内のアイコン要素 */
}

.button--primary {
  /* プライマリボタンの修飾子 */
}

OOCSS (Object-Oriented CSS)

• スキン
  オブジェクトの外観やテーマを定義します。
• オブジェクト
  独立したスタイルの単位であり、再利用可能なコンポーネントです。

.button {
  /* ボタンのオブジェクト */
}

.button--primary {
  /* プライマリボタンのスキン */
}

Atomic CSS

• 組み合わせ
  複数の原子的なクラスを組み合わせて、複雑なスタイルを構築します。
• 原子的なクラス
  単一のスタイルルールを持つ小さなクラスです。

.bg-blue {
  /* 青い背景の原子的なクラス */
}

.text-center {
  /* 中央揃えのテキストの原子的なクラス */
}

.button {
  /* ボタンのスタイル */
  .bg-blue .text-center;
}

• CSS-in-JS
  JavaScript の中で CSS を定義し、動的なスタイルを生成します。
• CSS Modules
  CSS ファイルを JavaScript モジュールとして扱って、スコープを制限し、名前衝突を防止します。