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 クラス名リスト