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

  • 416
    いいね
  • 8
    コメント

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