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


