BEMの考え方を参考にしつつ、下記のような方針で行くことにします。
命名規則
- 単語はハイフンで繋ぐ
アンダースコア、キャメルケースは使わない - 親要素にハイフンを含む名前はつけない
× post-list → ○ postlist - 省略形を使わない
※省略するかしないかの判断に迷うため
× txt、img、ttl → ○ text、image、title - 同じパーツは、トップページと下層ページでclass名を共通にする。
トップページで表示を変えるときは、.homeを使ってトップページ用のcssを書く。
クラス名
- list内のパーツはitem、それ以外はsection
- テンプレート制作時のみ、Modifier（色など）はマルチクラスにする
例：.postlist .theme-bgcolor { background: #f0f; }
ローディングの命名例
.section-loading
.loading-bg
.loading-bar
.loading-now
.loading-text
.loading-progress（progress＝進捗）
.loading-line