もう迷わない！CSSのclass名の付け方が解消する命名リスト
class名の命名語をまとめておくメリット
class名を考えることはコーディングにおいて、時間をかかる作業です。
かといって、適当に決めたclass名では、運用時に困ることも多々あります。
この記事では、
『class名の命名を考える時間がもったいない。』
『class名の付け方がイマイチわからない。』
『適当にclass名をつけて後で困る。』
そんな悩みを持たれてる方に向けて、class名を考える時間を減らし、管理のしやすい時短コーディングにつながる命名語の付け方をお伝えします。
よく使うCSSのclass名の命名語
ここでは基本的にBEM（MindBEMding）の命名規則に基づいて、使うことを前提に紹介します。
ただし、BEMを使用していない方についても参考になるとは思います。
BEM（MindBEMding）とは
block__element–modifierという命名規則でclass名をつける方法です。
気がつかないうちに同じクラス名を使ってしまって、cssが管理できなくなることを防いでくれます。
class名が.textだけだと、他の文章の箇所でclass名を使ってしまうこともありますよね。
class名を見ただけでも、どこのtextかパッはわかりません。
blockはエリアを表す単語
elementは要素を表す単語
modifierは状態を表す単語
をつなげて命名します。
blockとelementをつなぐ時は『__』
modifierをつなぐ時は『–』を使用します。
block__element–modifierの命名規則でつけたclass名を具体的に例に挙げて解説します。
class名『topInfo__btn–active』
block→トップページの新着情報（topInfo）
element→ボタン（btn）
modifier→アクティブ（active）
つまり、『トップページの新着情報（topInfo）にあるボタン（btn）がアクティブ状態（active）』を表したclass名になります。
BEMの命名規則にすることで、class名を見ただけで、このclass名がどこで使われているかってわかりやすくなりました。
modifierはないこともあるので、『トップページの新着情報にあるボタン』を表したいのであれば、『topInfo__btn』になります。
BEMは他にも色々ルールがあるので、興味がある方は、調べてください。
CSSの設計する際に、運用をしやすいFLOCSS（フロックス）など使う場合にも使うので、覚えておいて損はないです。
blockでよく使う命名語
見た目や性格を表す言葉を使うことが多い。
略語は一般的なもののみ使用。（txtやttl、img、btnなど）
それ以外は他の人が見ても理解できないため略さない。
コンポーネントでよく使う命名語
ボタン btn
カード card
ヘッダー header
フッター footer
フォーム form
表（table） table
タブ tab
サーチ search
メニュー menu
ナビ nav
ヒーローイメージ hero
メインビジュアル mainvisual
パンくず crumbs
ページ名やコンテンツエリア名に依存（ページのディレクトリー名に合わせる）
トップ top
沿革 history
企業情報 about,company
サービス service
実績 works
製品 product
コラム column
新着情報、ニュース info,news
料金、価格 fee
施設 facility
アクセス access
よくある質問 faq
お問い合わせ contact
プライバシーポリシー praivacy
強み strength
ex）トップページのタイトルの場合、topTtlなど,ブロックの要素は２語を足す場合はキャメルケースにする。
トップページの新着情報のブロックの場合、topInfo
お問い合わせページのフォームの箇所は、contactFormなど
ページ名の下層に主に付ける語句
セクション sec,section
elementでよく使う命名
機能や要素を表す言葉が多い
タイトル ttl,title,heading
サブタイトル subttl,subtitle
タイトルの補足（リード文） lead
文章 txt,text
写真、画像 img,photo
サムネイル thumb
キャプション cap,caption
日付 date,time
著者 author
詳細 detail
ロゴ logo
電話 tel
メール mail
コピーライト copy,copyright
バナー bnr,banner
ヘッダー header
フッター footer
リスト（主にul,olに使う） list
リスト（主にliに使う） item
インナー（レイアウト調整に使う） inner
ラップ（レイアウト調整に使う） wrap
リンク（aタグに使う） link
インプット input
ボタン btn
modifierでよく使う命名語
modifierは主に状態を表す言葉を使うことが多い。
色にまつわるもの red,blue,green
奇数、偶数 odd,even
アクティブな状態 active
現在の状態 current
おすすめサーバー
