Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away