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

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

昔はキャメルケースだの、アンダーバーだの色々試してましたが、
先月あたりから単語と単語はハイフンで繋ぐ形式に移行しました!
ので、以下の記述はハイフンさん大登場です。
理由は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




書いた日:2014年10月20日(月)18時55分
記事と関係の無いただのメモ:hero > section > group > team > unit