CSS設計などを見直し始めた先々週。いろいろ復習にもなり勉強になったのですが、
その際にCSS命名リスト表作成しました。この一覧を見れば、大概のものは載っている・・・筈っ！ これからCSS設計をする際の命名のサンプルにご活用ください。
※SMACSS設計を元にリスト表を作っています。
[quads id=”1″]
ページ構成（レイアウト）の規則命名
| レイアウト名 |
規則名 |
| ページ全体：コンテナ |
container |
| 囲い |
wrapper |
| コンテンツエリア |
contents |
| メインコンテンツ |
main |
| サブコンテンツ |
sub-contents |
| 臨時のコンテンツ |
extra-contents |
| グローバル |
global |
| ホーム |
home |
| TOPの一番目立つポジション、でかいブロック |
hero |
| ヘッダー サイトのロゴやタイトル、ナビゲーションを搭載する |
header |
| サービスの特徴や技術紹介 |
feature |
| サイドバー |
side |
| フッター |
footer |
| 分野 |
field |
| 区分 |
division |
| 中身 |
inner |
| 囲っているもの |
outer |
| 段落を囲むブロック |
sentence |
| レイアウトのためのボックス |
unit,box,col,area |
| 他の要素に組み合わせて使う |
box, area |
| 区切り線 |
separator |
レイアウトモジュール用命名クラス
| モジュール名 |
規則名 |
| 非表示 |
hidden, |
| 現在位置 |
current |
| リード文 |
lead |
| 奇数列 |
odd |
| 偶数列 |
even |
カラム用モジュール名（フルスタック用）
| モジュール名 |
規則名 |
| 1カラムのボックス |
col1 |
| 2カラムのボックス |
col2 |
| 3カラムレイアウト |
col3 |
| 4カラムレイアウト |
col4 |
| 5カラムレイアウト |
col5 |
| 6カラムレイアウト |
col6 |
| 7カラムレイアウト |
col7 |
| 8カラムレイアウト |
col8 |
| 9カラムレイアウト |
col9 |
| 10カラムレイアウト |
col10 |
| 11カラムレイアウト |
col11 |
| 12カラムレイアウト |
col12 |
ページ送り
| 内容 |
規則名 |
| 次へ |
next |
| 前へ |
prev |
| ページトップへ |
pagetop |
| 戻る |
return |
| 最初の項目 |
first, first-c （childの頭文字） |
| 最後の項目 |
last, last-c |
モジュール命名
主にヘッダー命名規則
| モジュール名 |
規則名 |
| サイトのタイトル |
site-ttl |
| 新着情報 |
news |
| 過去のニュース |
past-news |
| ロゴ |
logo |
| キャッチフレーズ |
catch |
| スローガン |
slogan |
| メニュー |
menu |
| サブメニュー |
sub-menu |
| タブ |
tab |
| カテゴリー |
category |
| ナビゲーション |
nav |
| グローバルナビゲーション |
g-nav |
| ローカルナビゲーション |
l-nav |
| 補足ナビゲーション |
sub-nav |
| ナビゲーション |
navbar |
| よくある質問 |
faq |
| お問い合わせ |
contact,inquiry |
| ドロップダウン |
dropdown |
| ビデオ |
video |
主にメインコンテツ命名規則
| モジュール名 |
規則名 |
| パンくずナビゲーション |
breadcrumb |
| （記事）タイトル |
ttl |
| 見出し |
headline |
| もっと見る |
more |
| お知らせ |
info |
| 案内 |
guide |
| 概要 |
outline |
| 話題 |
topic, topics |
| 注目情報 |
spotLight |
| 選び出す |
pickup |
| ハイライト |
mark |
| ご注意 |
attention |
| 警告 |
alert |
| 操作方法 |
instructions |
| 更新情報、更新日 |
update |
| 更新履歴、沿革 |
history |
| テキストで要約を入れるときに |
summary |
| 説明 |
description |
| 注釈 |
notes |
| 記事 |
article |
| 内側(入れ子構造) |
inner |
| 囲っているもの |
outer |
| リスト |
list |
| バナー |
bn |
| リンク |
link |
| 広告 |
pr |
| 検索ボックス |
search |
| カード形式デザイン |
card |
| フォーム関連 |
form |
時間・日付要素名
| モジュール名 |
規則名 |
| 時間 |
time |
| タイムスタンプ |
timestamp |
| 制作日、更新日 |
created |
| 日付 |
date |
画像要素で使う命名規則
| モジュール名 |
規則名 |
| ユーザーのアイコン画像 |
avatar |
| アイコン、web fontアイコン |
icon |
| 写真のサムネイル |
thumb |
ユーザー要素名
| モジュール名 |
規則名 |
| プロフィール |
profile |
| ログイン |
signin |
| ログアウト |
signout |
| ユーザー登録 |
signup |
| ユーザー |
user |
主にショップ用命名規則
| モジュール名 |
規則名 |
| 項目 |
item |
| 商品のリスト |
goodsList |
| 写真エリア |
photo, img |
| テキストエリア |
txt |
| 図版エリア |
figure |
一覧用命名クラス
| モジュール名 |
規則名 |
| 記事の一覧 |
articles |
| コメント一覧 |
comments |
| ユーザーの一覧 |
users |
リンク
管理画面要素名
| モジュール名 |
規則名 |
| ダッシュボード |
dashboard |
タイムライン
| モジュール名 |
規則名 |
| ストリーム |
stream |
| タイムライン |
timeline |
State：状態に使用する命名規則
| モジュール名 |
規則名 |
| 最初の画像,通常,マウスアウト時 |
bf、out |
| 最後の画像,マウスオン時 |
af、over、hover |
| 非表示 |
hidden |
| 選択時 |
selected |
| 現在地 |
current |
| レティナディスプレイ用 |
retina |
| スマートフォン用 |
sp |
| ガラケー用 |
gr |
| ロード中 |
loading |
| エラー |
error |
| アクティブ |
active |
| 無効 |
disable |
| 真 |
true |
| 偽 |
false |
いかがだったでしょうか？ある程度、必要なものはまとまっているかと思います。最初に命名が決まっていれば、CSSコードを見る際に、どの部分のカスケードかわかりやすくなります。ぜひ、今後の参考の一部にしてみてください。
参考サイト
これらの内容は、以下のサイトを参考にまとめさせて頂きました！ありがとうございます！
