クラス名で悩み、時間を無駄にしないための記事
命名規則はBEMベースなので、Block / Element / Modifierにわけてます。
命名のルール
誰が見てもわかる名前をつけること
絶対に省略しない。ただしfaqのように一般的にも浸透してる言葉なら良し
同じコンポーネント内で、
blockとElementに同じ命名をしない。.button__buttonや.input__inputはNG意味は違うけどパッと見であまりにも似てる単語はなるべく使わない。「container」と「content」、「date」と「data」など。
-で「〜〜の」を表す。「search-bar」で「検索のバー」、「tags-group」で「タグたちの集まり」というように単体では意味が伝わらないため、補助的な言葉（「sub」などの「~~の」に使われる言葉）だけ使わない。
タグの名前をクラス名にしないで必ず意味をもたせる。（
.text__br、.heading__spanなどNG）
Block
画面全体からみた大きなブロック
※Elementには絶対に使わない
| クラス名 | 補足 | |
|---|---|---|
| wrapper | ラッパー | メインとヘッダーフッターを囲うとき |
| header | ヘッダー | |
| main | メイン | 全体の上下の余白はなるべくここできめる |
| container | コンテナ | SP時の左右の余白、コンテンツ全体の中央寄せのためのブロック |
| footer | フッター | |
| side | サイド | サイドバーに |
| nav | ナビ | ページのナビに |
小さなパーツが集まってできる中ブロック
※Elementには使わない
| クラス名 | 補足 / 例 | |
|---|---|---|
| view | ビュー | 主にfirst-view,second-viewとして使う |
| imposter | インポスター | 子要素が中央に配置されたコンテナ。コンテナは画面いっぱい（100vh or 100vw）に広がる。 |
| section | セクション | 区分・区画 |
| card | カード | 画像+タイトル+テキストのような構成でカードのような見た目。複数並ぶ |
| group | グループ | 〇〇-group のように使う。同じパーツが集まってる部分などに。tags-group |
| holder | ホルダー | 〇〇-holder のように使う。別々のパーツが集まった一つのくくりとして。input-holder |
| bar | バー | 〇〇-bar のように使う。横並びで一列のまとまり |
| panel | パネル | cardとはまた違う体裁で画像単体、テキスト単体、panel自体リンクであることが多い。複数並ぶ |
| list | リスト | 〇〇-list のように使う |
| table | テーブル | 表。 |
小さなパーツ単位のブロック
※Elementにもなりえるクラス。ただし、p-button__buttonやp-input__inputにはしないこと。
| クラス名 | 補足 | |
|---|---|---|
| heading | ヘディング | 区画ごとのタイトル |
| button | ボタン | |
| link | リンク | ボタンのような装飾のない、リンク要素 |
| input | インプット | 入力ボックス |
| select | セレクト | セレクトボックス |
| checkbox | チェックボックス | チェックボックス+テキスト |
| radio | ラジオ | ラジオボタン+テキスト |
| icon | ラベル | インプットのラベル |
| tag | タグ | |
| row | ロウ | 横に並べたいとき |
| col | コル | 横に並べた子要素 |
Element
※小さなパーツとして、Blockにもなりうる
| クラス名 | 補足 | |
|---|---|---|
| inner | インナー | 親要素のすぐ下で囲む必要があるとき |
| head | ヘッド | 上部 |
| body | ボディ | 主要部分 |
| foot | フット | 下部 |
| title | タイトル | 題名（見出しとして一つだけ） |
| heading | ヘディング | 見出し（いくつも見出しがあるとき） |
| text | テキスト | |
| date | 日付 | |
| time | 時間 | |
| datetime | 日付+時間 | |
| unit | ユニット | 単位 |
| item | アイテム | list内のみに使用 |
| label | ラベル | |
| tag | タグ | |
| window | ウインドウ | 窓。input内の入力窓などに |
| avatar | アバター | ユーザープロフィールの写真などの部分 |
| image | イメージ | 画像 |
| thumbnail | サムネイル | |
| number | ナンバー |
modifier
状態
| クラス名 | 補足 | |
|---|---|---|
| active | アクティブ | |
| success | サクセス | 成功 |
| error | エラー | 入力ボックス |
| warning | ワーニング | 警告 |
サイズ
| クラス名 | |
|---|---|
| x-small | スモール |
| small | スモール |
| medium | ミディアム |
| large | ラージ |
| x-large | ラージ |
形状
| クラス名 | 補足 | |
|---|---|---|
| reverse | リバース | 反転 |
| round | ラウンド | 角丸 |
| circle | サークル | 円形、正丸 |
| right | ライト | 右寄せ |
| left | レフト | 左寄せ |
| center | センター | 真ん中 |
〜〜のなどでつかう言葉
主にBlock、Elementと組み合わせて、〇〇-{Block}のように使う。
補助的な言葉
| クラス名 | 補足 | |
|---|---|---|
| first | ファースト | 最初の |
| second | セカンド | 二番目の |
| next | ネクスト | 次の |
| prev | 前の | |
| global | グローバル | 全体の |
| sub | サブ | さぶ |
ページ名や内容、パーツ
| クラス名 | 補足 | |
|---|---|---|
| about | アバウト | わたしたちについて |
| work | ワーク | 仕事 |
| service | サービス | サービス・提供 |
| news | ニュース | お知らせ |
| product | プロダクト | 製品 |
| history | ヒストリー | 歴史 |
| concept | コンセプト | コンセプト |
| recommend | おすすめ | |
| index | インデックス | 目次 |
| contact | コンタクト | お問い合わせ |
| access | アクセス | 行き方 |
| shop | ショップ | 店舗 |
| privacy | グローバル | 全体の |
| faq | エフエーキュー | Q&A |
| confirm | 確認 | |
| finish | フィニッシュ | 完了 |
| search | サーチ | 検索 |
| result | リサルト | 結果 |
