HTMLとCSSクラスの命名について

命名で使用する単語に迷います。どうしたらいいですか。

基本単語のみをつかって命名すればいいんだ！！

ブロックなど親要素で使えそうなclass名

container : コンテナ
main : メイン
global : グローバル
home : ホーム
hero : でかいブロック。bootstrapのサンプルにある
inner : 中味。
outer : 囲っているもの。親。wrapperと同じ。
wrapper : 囲っているもの。親。

例えば、facebookのidだとおおまかに
home > globalContainer > content > mainContainer

ブロックや子要素で使えそうなclass名

article : articleタグがあるのであまり使いたくない。
block : 囲っているもの。
card : カード
cell : セル
content : 中味。blockと同じかも。
grid : グリッド
item : 子要素。使いやすい。
module : モジュール。ブログのウィジェットや新着コメント領域などへ。

恐らくgridのほうがcellよりでかいです。うろおぼえですがTwitterがそんな感じでした。
grid > cell

◯◯の一覧系で使えそうなclass名

articles : 記事の一覧
comments : コメント一覧
contents : contentを複数囲むなら
users : ユーザーの一覧

一覧系の上位は複数系にして、子要素は単数形にするという方法があります。

画像要素で使えそうなclass名

avatar : ユーザーのアイコン画像に。
image : 画像。あまりつかわないほうがいいかな。
img : 画像。つかわないほうがいいかな。
icon : アイコンに使用する。web fontアイコンなど。
thumb : 写真のサムネイルなど。

リンクやボタン要素で使えそうなclass名

btn : ボタン。Bootstrapがこれなので合わせたほうが無難？
button : SemanticUIのクラスはbtnではなくこちらになっています。どっちがいいのか。

テキスト要素で使えそうなclass名

description : 単語が長いのであまり使いたくない。
summary : 要約を入れるときに使う。
text : テキストを入れるときに使う。あまり使いたくない。

レイアウト要素で使えそうなclass名

layout : レイアウト。hogehogeLayoutみたいな命名にします。

ヘッダー要素で使えそうなclass名

header : ヘッダー。ページ内にheaderを含むクラスが複数存在する時代です。

フッター要素で使えそうなclass名

footer : ヘッダー。ページ内にfooterを含むクラスが複数存在する時代です。

フォーム要素で使えそうなclass名

form form要素関連
field input要素関連
radio　radiobox要素関連
checkbox checkbox要素関連
submit 送信

フォームの状態で使えそうなclass名

success　成功の場合
error　エラーの場合
required　必須
loading　ローディング中

タイムライン要素で使えそうなclass名

stream : ストリーム
timeline : タイムライン

時間・日付要素で使えそうなclass名

time
timestamp
created
date

ユーザ要素で使えそうなclass名

profile : プロフィール
signin : ログイン
signout : ログアウト
signup : ユーザー登録
user : ユーザー

管理画面要素で使えそうなclass名

dashboard : 管理画面系などリンクのmoduleなどが多い場合

ナビゲーションやメニュー要素で使えそうなclass名

menu : メニュー。navのほうがmenuよりも大きい印象
nav : ナビゲーション
navbar : navと何がちがうのかな？
tab : タブ

エレメントレベルで意味を持っているclass名

heading : 見出し
headline : 見出し
link : リンク
list : リスト、liやiOSのUITableViewみたいもの
title : タイトル

使いたくないclass名

div : どういう役割なのかわからない
rightside : レスポンシブな昨今、デスクトップの右サイドバーは、モバイルでも右サイドバーか？という疑問が生じる
span : どういう役割なのかわからない

更に迷ったら？

スキーマの単語を使うと便利です。
http://schema.org/Thing

感想

ブロックなどの命名要素はたくさんあるので、実際に使いながら絞るといいです。練習していけば慣れるのでしょうか。

HTMLとCSSクラスでよく使う命名について