適切な id 名や class 名のつけ方

意味のある名前にしよう、というお話。

適切な名前のつけ方

class 名や id 名には、どんな名前を付けたらよいだろうか。

例えば、文字を赤くしたいところに <span class="red">赤文字</span> と書いてしまうのは、「赤い文字にする」という見栄えの指定が HTML の中に記述されていることになってしまい、意味的には <font color="red"> と同じになってしまう。

適切な名前を付けるには、見た目優先に考えず、構造的な意味を考えることが大切である。

「何で文字を赤くしたいのか」を考え、「目立たせたいから」だとしたら、.attention だとか .notice というような class 名にすることで、見た目優先ではなく、構造を示した名前になる。また、「目立たせる (強調)」という意味では、em 要素や strong 要素もあるので、まずは HTML の要素でマークアップできないかをチェックしてみるとよいだろう。

他にも段組レイアウトなどで、左に置きたいから #left、右に置きたいから #right という名前の付け方は、見た目優先のつけ方なのでよくない。#contents と #nav といった名前なら、「コンテンツ部分」と「メニュー部分」という意味が伝わる。

よくある名前

場所や用途ごとに、使えそうな名前をリストアップしてみた。単語と単語の間はハイフン (-) で区切ったが、区切り方はアンダースコア (_)、大文字小文字などで区切ってもよいし、繋げてもよいだろう。

ページ全体を囲う
  • wrapper
  • wrap (wrapper の略)
  • container
  • page
  • contents
  • body
ヘッダー系
  • header
  • head
メニュー系
  • menu
  • main-menu
  • sub-menu
  • navi
  • global-navi
  • list
  • topic-path (パンくずリスト)
コンテンツ系
  • contents
  • body
  • main
フッター系
  • footer
  • foot
  • copyright
広告スペース系
  • ad
  • banner

今度は、特定の文章に使える class 名を紹介。

文章の強調系
  • em 要素、strong 要素
  • emphasis (em 要素の略)
  • attention
  • alert
  • caution
  • notice
注釈・メモ

強調とは逆に、蛇足とか備忘録とか、あまり重要でないことを表すときに。括弧の文章を span.memo などで囲って、文字色を少し薄くしたりして使える。

  • note
  • notes
  • memo
  • memos

その他考えられるもの。こんな感じで、その文章の意味を考えて名前をつけよう。