こんにちは。
クリエイティブホープの藤田です。

コーディングをしていると、class名やid名で悩むことがあります。
いつかまとめようと思っていてなかなかまとめることができませんでしたが、
CSS HappyLifeさんの「もう、class名やid名で悩まないんだからっ！！」というエントリと同様に、
以前、弊社で制作したCSSに含まれるclass名やid名も洗い出してまとめました。

■命名ルール！
・基本はcamel式で命名する。
・連番(コード体系）をつける場合は、連番の前に「_」アンダーバーをつけ、連番は3桁の数字とする。

以前は、連番(コード体系）を付ける際に001→002→003と命名していましたが、
最近は010→020→030と命名することもあります。
（例）メニューをmenu_010、menu_020、menu_030と命名

▼ここからclass名、id名リスト
---------------------------

■大きなエリア
wrapperArea
bodyArea
leftArea
mainArea
rightArea

■ヘッダー、フッター
header
footer

■ナビゲーション
globalNavigation
leftLocalNavigation
rightLocalNavigation
backToTopNavigation
footerNavigation
menu＋連番(menu_001,menu_002...)
nav＋連番(nav_001,nav_002...)

■パーツ
keyvisual
pageTitle
subTitle
navigation
link
caption
article
attention
color
component
lead
notes
archive
date
detail
entry
unit
item

■範囲
main
container
content
contents
section
block
body
box
twoColumns
column

■レイアウトを表すもの
layout
leftColumn
centerColumn
rightColumn

■組み合わせて使用するもの
※上記のものと組み合わせて使用する。
（例）layoutType_001、sectionBgなど。

img
image
text
txt
title
head
btn
bg
type
id
category
position
top
middle
bottom
left
center
right

---------------------------
▲ここまで

 

基本的には、下記の名称と連番（コード体系）を組み合わせて使用しているパターンが多かったです。
また、HTMLに書かれている内容によって名称を決定しているケースも多数見受けられました。
（例）「お問い合わせをする」というボタンに設定するclass名は、
「contact」＋「Btn」＋「_」(アンダーバー)＋「連番」＝「contactBtn_001」

今後もリストの更新を続けていきます。

余談

今回、洗い出しをしていて見つけた、つい笑ってしまったclass名。
「bigThree」。。。
こちらは掲載しませんでした。
頭の中でタモリさん、さんまさん、たけしさんが浮かびました。