CSSのclass名の付け方

block：エリアを表す単語
element：要素を表す単語
modifier：状態を表す単語

blockでよく使う命名語

コンポーネントでよく使う命名語

• ボタン　btn
• カード　card
• ヘッダー　header
• フッター　footer
• フォーム　form
• 表（table）table
• タブ　tab
• サーチ　search
• メニュー　menu
• ナビ　nav
• ヒーローイメージ　hero
• メインビジュアル　mainvisual
• パンくず　crumb

ページ名やコンテンツエリア名に依存

• トップ　top
• ページ　page
• 沿革　history
• 企業情報　about,company
• サービス　service
• 実績　works
• 製品　product
• コラム　column
• 新着情報、ニュース　info,news
• 料金、価格　fee
• 施設　facility
• アクセス　access
• よくある質問　faq
• お問い合わせ　contact
• プライバシー　praivacy
• 強み　strength

elementでよく使う命名

• タイトル　title
• サブタイトル　subtitle
• タイトルの補足（リード）lead
• 文章　text
• 内容　content
• 写真、画像　img,photo
• サムネイル　thumb
• キャプション　caption
• 日付　date
• 詳細　detail
• ロゴ　logo
• 電話　tel
• メール　mail
• コピーライト　copy
• バナー　bnr
• ヘッダー　header
• フッター　footer
• リスト（主にul,olに使う）　list
• リスト（主にliに使う）item
• インナー（レイアウト調整に使う）inner
• ラップ（レイアウト調整に使う）wrap
• ボタン　btn

modifierでよく使う命名語

• 色にまつわるもの　red,blue,green
• アクティブな状態　active
• 現在の状態　current