CSSのクラス名を決めるときに使う単語リストを
自分のチーム用にドキュメント化してみます🙌
設計のご参考になれば幸いです。
#CSS命名の考え方
##略さない
揺れる原因となるためbtn、bnrなど略した英単語を使わない。
##中学校の教科書程度の平易な英単語を使う
カタカナ英語でも一般的に使われている英単語を使うようにする。
プログラマ目線でなく一般的に使われる英単語を採用する。
##日本語ローマ字表記を使わない
mokujiなど日本語のローマ字の表示を使わない。
他要素の英単語を命名規則でも使う
- ディレクトリやURLの英単語
- デザインに英語表記がある場合
- 多言語で英語サイトがある場合
このような場合はCSS命名規則でも同じ単語を使用する。
次からclass命名の英単語一覧になります。
#サイト全体で使うclass命名
- main - メイン
- sub - サブ
- common - 共通
- local - カテゴリ以下
#カテゴリ／個別ページのclass命名
- index - トップページ（次候補：top）
- about - 会社概要（次候補：company）
- works - 仕事、実績
- product - 製品
- service - サービス
- news - お知らせ（次候補：info）
- event - イベント
- history - 沿革
- archive - 記事一覧（次候補：archives,bucknumber）
- contact - 問い合わせ（次候補：inquiry）
- access - アクセス
- shop - 店舗
- related - 関連記事
- privacy - プライバシーポリシー（次候補：privacypolicy）
- faq - よくあるご質問（次候補：qa）
- contact01 - フォームの入力（次候補：contact_input）
- contact02- フォームの確認（次候補：contact_）
- contact03 - フォームの完了（次候補：contact_fix）
- search - 検索結果
- cart - 購入カート
- law - 特定商取引
- career 中途採用
- recruit 新卒採用
- delivery 配送、送料
- message、greeting 代表挨拶、メッセージ
- officer - 役員紹介
- staff,member - 社員紹介
- jobs 職種
- welfare 福利厚生
- culture 社内制度
- terms 規約
#BEM_Block
- card - カードレイアウト
- section - セクション
- post - 記事（次候補：entry、article）
- wrap - 大枠（次候補：container）
- group - グループ
- module - 部品（次候補：parts、unit）
- area - 箇所
- note - 注釈
- description - 概要
- intro - 前置き・導入
- info - お知らせ
- detail - 詳細
- meta メタ情報
- noResults 検索結果なし
#BEM_Element
- inner - 内側の
- body - 主要部分（次候補：contents）
- head - 上部
- foot - 下部
- heading - 見出し
- lead - 見出しの補足・記事の要約
- list - 一覧・表。
- item - ul、olのli
- column - 縦列
- row - 横列
- text - 本文
- caption - 画像・図表の補足文
- thumb - サムネイル画像、画像の枠
- tel - 電話番号
- address - 住所
- date - 日時（次候補：time）
- category - カテゴリ
- tag - タグ
- separator - 境界線
- arrow 矢印
- lead リード文
#BEM_Modifier
- success - 成功
- alert - 注意
- error - 失敗
- small - 小
- large - 大
- push - 押す
- pull - 引く
- left- 左
- center - 中央
- right - 右
- top - 縦上部
- middle - 縦中央
- bottom - 縦下部
- prev 前
- next 次
- back もどる
- more もっと
#UI／ナビゲーション
- globalNav グローバルナビゲーション
- localNav ローカルナビゲーション
- siteNav サイト全体のナビゲーション
#UI／インターフェイス
- humberger ハンバーガーメニュー
- mainVisual メインビジュアル
- carousel カルーセル
- tab タブ
- icon アイコン
- button ボタン
#State／状態変化
- show - 見せる（次候補：view）
- hidden - 隠す
- open - 開く
- close - 閉じる
- current - 現在地
- active - 有効
- disabled - 無効
#参考URL
CSSのクラス名を決めるときに使うリストをつくりました
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
こちらの記事を大変参考にいたしました。