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

リンク

モジュール名 規則名
ボタン btn

管理画面要素名

モジュール名 規則名
ダッシュボード dashboard

タイムライン

モジュール名 規則名
ストリーム stream
タイムライン timeline

State:状態に使用する命名規則

モジュール名 規則名
最初の画像,通常,マウスアウト時 bf、out
最後の画像,マウスオン時 af、over、hover
非表示 hidden
選択時 selected
現在地 current
レティナディスプレイ用 retina
スマートフォン用 sp
ガラケー用 gr
ロード中 loading
エラー error
アクティブ active
無効 disable
true
false

いかがだったでしょうか?ある程度、必要なものはまとまっているかと思います。最初に命名が決まっていれば、CSSコードを見る際に、どの部分のカスケードかわかりやすくなります。ぜひ、今後の参考の一部にしてみてください。

参考サイト

これらの内容は、以下のサイトを参考にまとめさせて頂きました!ありがとうございます!