BEM命名規則を前提としています。
ルール
略さない（imgは略してOK）
長い単語で一般的な略し方で浸透してる場合は略してOKとします。
-
description...desc -
introduction...intro -
information...info -
Frequently Asked Questions...faq
一般的な単語を使うこと
新しい言葉は作らないでください
blockとElementに同じ命名をしない。
.button__buttonや.input__inputはNG
同じコンポーネント内で似てる単語は使わない。
containerとcontent、dateとdataなど。
単語をつなぐときは-を使う
〇〇-✕✕のように-でつなぐことで「〇〇の✕✕」を表す。
search-barで「検索のバー」、tag-groupで「タグの集まり」というように
HTMLタグの名前をクラス名にしない
必ず意味をもたせる。
.text__br、.heading__spanなどNG
ローマ字は使用しない
見出し、表題にはtitleを使用
headingもありますがheaderとかぶるためtitleを使用します
クラス名リスト
画面全体からみた大きなブロック
※Elementとしては使用しません
| クラス名 | 補足 | |
|---|---|---|
| wrapper | ラッパー | メインとヘッダーフッターを囲うとき |
| header | ヘッダー | |
| main | メイン | 全体の上下の余白はなるべくここできめる |
| container | コンテナ | SP時の左右の余白、コンテンツ全体の中央寄せのためのブロック |
| footer | フッター | |
| side | サイド | サイドバーに |
| nav | ナビ | ページのナビに |
大きなパーツ
汎用的に使わない限り、abaut-cardのように必ず何のcardなのかを示してください
| クラス名 | 補足 / 例 | |
|---|---|---|
| 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 | テーブル | 表 |
小さな単位のパーツ
| クラス名 | 補足 | |
|---|---|---|
| title | タイトル | 区画ごとのタイトル |
| text | テキスト | |
| date | 日付 | |
| time | 時間 | |
| datetime | 日付+時間 | |
| unit | ユニット | 単位 |
| item | アイテム | list内のみに使用 |
| label | ラベル | |
| tag | タグ | |
| window | ウインドウ | 窓。input内の入力窓などに |
| avatar | アバター | ユーザープロフィールの写真などの部分 |
| image | イメージ | 画像 |
| thumbnail | サムネイル | |
| number | ナンバー | |
| button | ボタン | |
| link | リンク | ボタンのような装飾のない、テキストリンク要素 |
| input | インプット | 入力ボックス |
| select | セレクト | セレクトボックス |
| checkbox | チェックボックス | チェックボックス+テキスト |
| radio | ラジオ | ラジオボタン+テキスト |
| label | ラベル | インプットのラベル |
| icon | アイコン | |
| tag | タグ | |
| grid | グリッド | グリッドに並べる時 |
Elementとして使われるパーツ
| クラス名 | 補足 | |
|---|---|---|
| inner | インナー | 親要素のすぐ下で囲む必要があるとき |
| head | ヘッド | 上部 |
| body | ボディ | 主要部分 |
| foot | フット | 下部 |
状態
| クラス名 | 補足 | |
|---|---|---|
| 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 | リサルト | 結果 |