毎回悩むんです。 本当に、何年やってんだ！！って自分で思いながら。

また次の案件で悲しみに包まれないように、 今からでも殴り書きでいいので書いていこうと思います。 （気が向いたら更新するつもり）

昔はキャメルケースだの、アンダーバーだの色々試してましたが、 先月あたりから単語と単語はハイフンで繋ぐ形式に移行しました！ ので、以下の記述はハイフンさん大登場です。 理由はCSSのプロパティ名とか値とかもハイフンですし、data属性とかもハイフン、最近のjavascriptフレームワークも独自属性にハイフン使っているので、統一してみました。 統一感があるとすごいね、とても見やすくなりました！我ながら単純である。

ではでは、あまり期待をせずに参りましょう ┌（・。・）┘ ﾄﾞﾄﾞﾄﾞﾄﾞﾄﾞﾄﾞ ※あくまでも一例です。 ※改善したいけどとりあえずってのが結構あります。助けてくれ！

■site-（そのサイトの揺るぎないclass、またはid）

site-wrapper

site-header site-logo site-nav-global site-nav-language

site-contents site-main

site-footer site-nav-footer

■ico-（アイコン、連番が良いのか名前つけた方が良いのか教えてほしい）

ico-arrow-red-top（この辺汚いので何とかしたいぞ！） ico-arrow-red-right ico-arrow-red-bottom ico-arrow-red-left

■btn-（ボタン）

• 背景画像 btn-nav-add btn-nav-remove btn-nav-success btn-nav-failure
• テキスト btn-txt-red（色の名前ってダメかな？？？） btn-txt-white btn-txt-black

■group-（グループ） group-about group-product group-cart group-contact group-form group-form

■grid-（グリッド） CSSフレームワークで良くあるやつ！ 最近は Pure がお気に入りです。 grid-u-1 grid-u-2 grid-u-3 grid-u-4 grid-u-5

■ttl-（タイトル） 他のノードの入れ子になっていたら文字が、 小さくなるなどの処理を入れると扱いやすさアップすると思います！ ttl-cool ttl-primary ttl-h1 ttl-h2

■txt-（テキスト） txt-note txt-decoration txt-attention

■form-（フォーム） input-text-normal（inputの時はtxtにせずに、textにした方が良いのか悩み中...） input-text-mail input-text-password input-text-tel

input-check-normal input-check-cool

input-radio-normal input-radio-cool

---

またかなり変わりそうだけども。