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
感想
ブロックなどの命名要素はたくさんあるので、実際に使いながら絞るといいです。練習していけば慣れるのでしょうか。
関連
以下の様なBEMなクラス命名をする際に、当記事を見ながら命名しています
http://qiita.com/pugiemonn/items/964203782e1fcb3d02c3