« Daily Link | Back To Blog Top | Daily Link »
Class名とID名の命名規則
- Class名とID名の命名規則(1)
- Class名とID名の命名規則(2)
Class名やID名を付ける時、それも2単語以上で構成される名前を付ける時には、どんな規則で付けていますか？
今日は、Class名とID名の命名規則に関して書いてみようと思います。
色んなサイトを見ていると、大きく分けて3つのパターンがあるように思います。
そのまま系
id="maincontent"のように、全て小文字で記述するパターンです。
動作に問題は無いのですけど、可読性の点が若干気になるかもしれません。
ちなみにこのサイトはこのパターンを採用しています。 理由は後述します。
アンダースコア系
id="main_content"のように、単語と単語をアンダースコアで繋ぐパターンです。
可読性は向上しますけど、実はIE3、IE4、NN4.x（MAC）、NN6（初期Ver,）等のブラウザで認識されないバグがあります。
これらのブラウザもターゲットに含める場合は、アンダースコアは使わない方が良いでしょう。
また、こちらは余り見かけませんけど、ハイフンで繋ぐパターンもIE3で無視されたりします。
ラクダ系
id="mainContent"のように、2つ目の単語の1文字目のみ、大文字で記述するパターンです。 割と最近、良く見かけると思います。
これは動作に問題が無く、また可読性も若干上がるので、現在ではベターな書き方だと思います。
ただ、手書きで記述していく際にはケアレスミスに気をつけなければいけません。
何故、このサイトではこのラクダ系を使わないのかと言うと、規模が余り大きく無く、また個人サイトである事からです。
どちらにしようか、ちょっと迷ったんですけどね。
TracBack
Reference Entry: Class名とID名の命名規則:
LifeHacks with Aipo » CSSのclass名、id名について考える１
スタイルシートでレイアウトを組んでいると、class名、id名にどんな名前をつけるか悩むケースがあります。 最初にclass,idの命名規則みたいなドキュ...
TracBack Time: 2007年02月08日 00:02
素人のWebデザイン » Design11-ID名を分かりやすく
11回目はお馴染みの所からNo.39。 前回までのテンプレでID名が間違っていた...
TracBack Time: 2007年05月15日 23:36
4 Comment
貴重な資料をありがとうございます！
リソースなのですけど、今回のエントリの元になったのも、実際に色んなソースを見たり、書籍や雑誌を参考にした物なのです。
ですので、お力になれそうな物は無いのが現状です・・。
とは言え、今後見つかったら、またエントリなりに追加したいと思います。
コメントありがとうございました！
下書きエントリーが溜まっていて公開できていないのですが、こちらのエントリーがヒントになって一つ思ったことがあります。
class や id の命名規則は JavaScript やそのほかの関連するプログラム言語と照らし合わせて考えたりすると良いのかなぁと。
結果、サイトで利用している環境に依存するわけですが、Ajax などが多用されているようなサイトでは JavaScript の命名規則と合わせることで可読性が高まるんじゃないかと。
特に id の命名規則はその方が良いように思います。
エントリーと全然関係ないですが、コメント欄 (textarea) のスクロールバーが表示されないですね。長文のコメント書くときにちょっと面倒でした... (つまらない指摘でごめんさい)
＞class や id の命名規則は JavaScript やそのほかの関連するプログラム言語と照らし合わせて考えたりすると良いのかなぁと。
確かに！
その事は全く考慮していませんでした。
プログラム方面は、丁度今勉強中ですので、それも留意してみます。
コメント欄のご指摘頂きました箇所を、修正しました。
ご指摘、ありがとうございました。
私の確認に至らない点がありまして、ご迷惑をおかけしました。
私もちょうどclass id のホニャララをまとめようと思っていたのですが、↓のあたりの切り口で見てみるとも面白いと思います。
And all that Malarkey // Naming conventions table
http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html
(X)HTML の id/class における命名規則 on CSS Flight - Jun, 15th 2006 (6)
http://purpr.in/presentation/cssflight/#(6)
Google Code: Web Authoring Statistics: Classes
http://code.google.com/webstats/2005-12/classes.html
他に関連ありそうなリソースご存知ないですか？
Name:やまざき | 2006年09月26日 20:15