search
LoginSignup
30

More than 1 year has passed since last update.

posted at

updated at

Organization

CSS命名で迷わない サイトで使う英語一覧

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
こちらの記事を大変参考にいたしました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
30