Frontend
クラス名の選び方 : CSSに最適な命名候補の選択
CSSクラスの名前に悩んだ際に役立つ、スタイルの管理と可読性を向上に適切な命名候補をピックアップ。
モクジ
クラスのネーミングのルール
識別子とは、
一意で識別可能な名前を指す。
HTMLとCSSにおいて、要素やスタイルルールを識別するために識別子が使用される。
- HTMLの識別子
- 要素に割り当てられる “id” 属性と “class” 属性を指す。
- CSSの識別子
- 要素を選択するためのセレクタとして使用される。
- Classセレクタ、idセレクタ、要素セレクタ、属性セレクタ
クラスのネーミング原則
ネーミングポイント
コードの可読性を向上させるため意味のある名前を付ける。
- 簡潔
- その要素が何を表しているかを説明する簡潔な単語やフレーズを使う。
- 一貫性
- わかりやすく一貫性のある名前を付ける。
- イメージできる
- 『機能 ≡ それが何なのか』
- 『役割 ≡ 何のために使用されるのか』
- 不適切
- 『見た目』だけを表す命名は適切ではない。
ルール
名前を付ける際、一定のルールがある。
- 半角英数字を使用
- 全角英数字やアルファベット以外の文字は使用しない。
- スペースは不使用
- 半角スペースを入れると、その前後で別のクラス名と認識される。
- 限定される記号
- 使用可能な記号は– ハイフン _ アンダースコアに限定される。
- 頭文字の指定
- 数字や記号から開始しているクラス名は認識されないため、アルファベットから始まる。
英単語の結合方式
クラス名を付ける際、複数の英単語を使用する場合がある。
この時の記法についてのルールがある。
単語の結合記法ルール表
| trem | discription | example |
|---|---|---|
|
2つ目以降の英単語の1文字目を大文字にする | subTitle |
|
– ハイフンでつなぐ。 | sub-title |
|
英単語の1文字目を大文字にする。 | SubTitle |
|
_アンダースコアでつなぐ。 | sub_title |
結合表示例
- BlockとElementを結合する場合
- block__elementの様に、二つの__ アンダースコアで繋げる。
- menu__item, global-nav__link-item
- Modifierと状態見た目、振舞いを結合する場合
- kye_valueの様に、一つの_ アンダースコアで繋げる。
- size_s, item_active
クラス名に使う単語例とその短縮型
BEM等規則によりクラス名を付ける場合、クラス名は 長くなりがちなので、単語を短縮しコードの可読性を高める。
01. セクショニングに関する単語
| word | abbr | description |
|---|---|---|
| site | st | Webサイト |
| page | pg | ページ |
| chapter | chp | 章 |
| section | sct | 項目 |
| subsection | sbsct | 節 |
| topics | tpc | トピックス、話題、テーマ。 |
| paragraph | p | パラグラフ、段落。 |
| category(ies) | cat(s) | カテゴリー |
| taxonomy | txmy | タクソノミ |
| tag | tg | タグ |
02. ページ構成に関する単語
| word | abbr | description |
|---|---|---|
| area | ara | エリア。 特定の範囲を指定。 |
| block | bl | レイアウトの基本的な単位を指す。 複数のブロックを組み合わせてWebページ全体の構成を形成する。 |
| box | box | レイアウトの基本的な単位を指す。 テキストや画像などのコンテンツを配置するための領域。 主に要素のスタイル背景色や枠線の設定に利用。 |
| container | cnn | コンテナ。レイアウト全体を囲み大枠を作成する。 一般的にコンテンツをグループ化するために使用。 |
| wrapper | wrp | ラッパー。レイアウト全体を囲み大枠を作成する。 一般的にスタイルを適用するために要素を グループ化するために使用。 |
| module | mdl | モジュール。
複数のコンポーネントを組み合わせたもの。 再利用可能な単位として分割されたコンポーネント。 独立した機能を持つ小さな単位。 ログインフォーム、ニュースリスト、etc |
| component | cpnt | 再利用可能な部品。
UIの構成要素や機能を持つ小さな単位。 ヘッダー、フッター、ナビゲーションバー、フォーム,etc |
| content(s) | ctt(s) | 実際に表示される情報。 テキスト、画像、動画等のメディア |
| element | elm | Webページを構成する最小単位の要素。 |
| node | nd | 一般的には木構造において、ツリーの中の要素を表す用語。 親子関係を有する要素。 |
| layout | ly | レイアウト |
| parts | pts | パーツ、部品 |
| inner | inn | インナー。 要素の内側を指定。 |
| outer | otr | アウター。 要素の外側を指定。 |
| parent | prnt | 親要素 |
| child | cld | 子要素 |
| head | hd | ヘッド |
| body | bd | ボディ |
| foot | ft | フット |
03. 構成要素に関する単語
| word | abbr | description |
|---|---|---|
| article | atcl | 完結した独立した内容を表現するコンテンツのブロック。 ニュース記事やブログ記事、論文、etc |
| aside | asd | メインコンテンツとは関連性が低い追加情報を表現するコンテンツ。 |
| blockquote | blcqt | 引用されたテキストを示す要素。 |
| details | dtl | ディテール、詳細情報。 |
| fieldset | fldst | フォーム内の関連するフォームコントロールをグループ化する要素。 |
| figure | fgr | 図表全般を表現する要素。 画像、写真、グラフ、コード、etc |
| from | from | フォーム |
| frame | fram | フレーム |
| grid | grd | グリッド |
| table | tbl | テーブル |
| colum | col | 縦方向に配置された1つのエリア。 |
| row | row | 横方向に並べられた複数のコンテンツを格納するエリア。 |
| list | li | リスト |
| cell | cl | セル |
04. モジュールに関する単語
| word | abbr | description |
|---|---|---|
| ad | ad | 広告 |
| banner | bnn | Webページにおいて、画像やメッセージを含む広告。 |
| beradcrumb | brdcmb | パンくずを意とする英単語。 ユーザーが現在どのページにいるかを示すナビゲーションの一種。 |
| card | crd | 情報をまとめて表示するために使用されるボックス。 |
| dashboard | dbrd | 情報やデータを表示した管理画面。 |
| jumbotron | jmb | ジャンボトロン。 主要なメッセージやコール・トゥ・アクションを 強調するための大きなコンテンツ。 |
| main visual | mv | メインビジュアル |
| menu | mn | メニュー |
| modal | mda | 別ウィンドウのようにポップアップするコンテンツ。 通常はモーダルダイアログと呼ばれる。 |
| navigation | nav | ナビゲーション |
| navbar | nvbr | ナビゲーションバー |
| pager | pgr | ページャ。 ページを一定数ずつ表示する仕組み。 |
| pagination | pgntn | ページネーション。 複数のページに分割して表示するための仕組み。 |
| procedure | prcd | プロシージャ。手順や流れを示すための要素。 |
| slider | sld | スライダー。Webページ上に表示される画像や コンテンツをスライドショー形式で表示する要素。 |
05. コンポーネントに関する単語
| word | abbr | description |
|---|---|---|
| avatar | avt | アバター ユーザーのアイコン画像 |
| button | btn | ボタン |
| caption | cpt | キャプション。
画像や表等に関連するタイトル、見出、説明文。 |
| comment(s) | cmmt(s) | : コメント(一覧) |
| icon | icn | アイコン |
| input | iput | インプット |
| image | img | イメージ |
| item | itm | アイテム |
| label | lbl | ラベル |
| logo | lgo | ロゴ |
| media | med | 画像や動画などの視覚的なコンテンツ。 |
| note | nte | 注意喚起や、特定の情報を強調するための メッセージボックス。 |
| panel | pnl | パネル |
| search | srch | サーチ |
| step | stp | ステップ |
| summary | summ | 要約や概要。 |
| tab | tab | タブ |
| text | txt | テキスト |
| theme | thm | テーマ |
| thumbnail | thmb | サムネイル |
| title | ttl | タイトル |
| text area | txara | テキストエリア |
| value | val | 値 |
| word | wrd | ワード |
06.機能や働きに関する単語
| word | abbr | description |
|---|---|---|
| function | fnc | ファンクション |
| appearance | appa | 見た目 |
| Process | pcss | プロセス。 一連の手順、操作、工程の全体的なフレームワーク。 |
| Procedure | prcd | 一連の手続きや規則や方法 。 プロセス内の特定の部分や特定の目的に焦点を当てた工程。 |
| step | stp | ステップ。 プロセスの個々の段階。 |
| Flow | flw | フロー。 プロセスの一貫した流れや経路。 |
| accordion | accd | アコーディオン |
| clearfix | cf | クリアフィックス |
| previous | prv | 前の |
| next | nxt | 次の |
| toggle | tgg | トグル |
07.修飾語
| word | abbr | description |
|---|---|---|
| danger | dng | デンジャ |
| default | dfl | デフォルト。既定値、初期設定を示す用語。 |
| global | gbl | グローバル |
| information | info | インフォメーション |
| level | lvl | レベル |
| local | lcl | ローカル |
| number | num | ナンバー |
| main | mn | メイン |
| reverse | rev | リバース |
| substitute | sub | サブ |
| success | scs | 成功したことを示す用語。 |
| temporary | tmp | 一時的な、仮の状態を示す用語。 |
| formal | fml | 形式的な状態を示す用語。 |
| version | ver | バージョン |
| warning | wng | ワーニング |
08.形容詞
| word | abbr | description |
|---|---|---|
| right | r | 右 |
| left | l | 左 |
| top | tp | トップ |
| bottom | btm | ボトム |
| center | cter | センター |
| middle | mdd | ミドル |
| giant | gnt | ジャイアント、巨大な、突出して大きい。 |
| huge | hg | ヒュージ、非常に大きい。 |
| big | big | ビッグ、大きい。 |
| large | lrg | ラージ、比較して大きい。 |
| medium | mdm | ミディアム、中程度、中間。 |
| nomal | nml | ノーマル、普通、標準的な。 |
| samll | sml | スモール、小さい。 |
| little | lttl | リトル、非常に小さい。 |
| tiny | tny | ティニー、極めて小さい。 |
| vertical | vtcl | 垂直 |
| horizontal | hrzn | 水平 |
09.一般名詞
| word | abbr | description |
|---|---|---|
| desktop | dtp | デスクトップ |
| laptop | ltp | ラップトップ |
| tablet | tbl | タブレット |
| mobile | mbl | モバイル |
| price | prc | プライス |
| term | trm | 用語 |
| description | dscr | 説明 |
| abbreviation | abbr | 略語 |
| excerpt | excpt | 抜粋 |
10.役割、与えられた働き又は役目
| word | abbr | description |
|---|---|---|
| is-active | – | アクティブ |
| is-disabled | – | ディスアブル、無効 |
| is-show | – | ショー |
| is-hidden | – | ヒデン |
| is-visible | – | ビジュアル |
| is-opened | – | オープン |
| is-closed | – | クローズ |
11.状態や結果を表す単語
| word | abbr | description |
|---|---|---|
| success | scs | 成功の場合 |
| error | err | エラーの場合 |
| required | rqd | 必須 |
| loading | ldg | ローディング中 |
| signin | sgin | ログイン |
| signout | sgout | ログアウト |
| signup | sgup | ユーザー登録 |
| user | usr | ユーザー |
| profile | prfl | プロフィール |