[CSS設計]わたしはクラス名でもう悩まない[BEMベース]

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 | リサルト | 結果 |




# 参考
[CSSのクラス名を決めるときに使うリストをつくりました \- Qiita](https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470)