CSSクラス名の命名規則リスト

CSS

CSSのクラス名を統一することは、コードの保守性と可読性を向上させます。以下は、一般的なCSSクラス名の命名規則をまとめたリストです。

形容詞(Adjectives)

  • main: 主要な
  • primary: 主要な
  • secondary: 補助的な

分類(Categories)

  • about: 〜について
  • work: 仕事
  • product: 製品

Block要素

  • section: 区分
  • content: 内容
  • article: 記事

Element要素

  • inner: 内側の
  • outer: 外側の
  • body: 主要部分

Modifier要素

  • success: 成功
  • alert: 注意
  • error: 間違い

状態(States)

  • show: 見せる
  • hide: 隠す
  • active: 有効な

UI要素

  • link: アンカーテキスト
  • button: ボタン
  • icon: アイコン

ナビゲーション(Navigation)

  • navigation: ナビゲーション
  • breadcrumb: パンくずリスト

フォーム(Form)

  • form: 送信フォーム
  • login: ログインフォーム
  • search-box: 検索ボックス

まとめ

これらのクラス名は、デザインの意図やコンポーネントの役割を反映するように命名されています。統一された命名規則を用いることで、プロジェクト全体の一貫性を保ち、チーム内でのコミュニケーションを円滑にすることができます。詳細はGitHubリポジトリで確認できます:CSS クラス名リスト