CSS記述方法の記述で、2つの単語を組み合わせた「id」もしくは「cl

質問

CSS記述方法の記述で、2つの単語を組み合わせた「id」もしくは「class」の名所の付け方の質問です。

1.アンダーバーでつなぐ
　例）main_contents
2.ハイフンでつなぐ
　例）main-contents
3.キャメルケースを使う
　例）mainContents
4.小文字で並べる
　例）maincontents

複数のサイトで、「3.キャメルケースを使うのが良い」とありました。
確かにブラウザによって左右されにくいのならば、キャメルケースを使うのが、好ましいと思いますが・・・
XHTMLでは大文字を使うのはNGとされているので、その辺りが気になっています。

何を使えば好ましいのか？実際は何を使うパターンが多いのか？
わかりましたら教えて頂けますでしょうか。

ちなにも上記の記載した複数サイトとは下記です。

http://www.coolwebwindow.com/csstips/cssbasic/000225.php
http://blog.24html.com/guideline/general/212/

回答No.4

think49 · ベストアンサー

#1, 2 です。

多分、誤解されていると思います。
XHTMLでは「属性名」は小文字に限定されますが、「属性値」は小文字に限定されていません。

----
4.2 要素名及び属性名は小文字でなければならない

XHTML文書は、すべてのHTML要素名及び属性名に小文字を使わなければならない。この相違点が必要なのは、XMLが大文字小文字を区別し、たとえば <li> と <LI> とは異なるタグだからである。
http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#h-4.2
----

----
<!-- HTML 4.01 の例 -->
<DIV ID="Sample">Sample</DIV>
　↓
<!-- XHTML5 の例 -->
<div id="Sample">Sample</div>
----

XHTML が属性値に影響するのは ID などの属性型であったり、Name などの生成規則によるものです。
それらは個別に定義されるので、「XHTML の属性値全体として小文字でなければならない」という規則はありません。

-----
ハイフンとアンダースコアにまつわる問題はこの辺でしょうか。

CSSでid名やclass名に「_」や「-」は危険？ | OKWave
http://okwave.jp/qa/q2355245.html
スタイルシートの基本 -- ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/html/htminfo17.html#selector-chars

ものすごく古い話ですし、「IE6 ではアンダースコアで始まる名前が無視される」という無視して良いレベルの不具合だと思います。
(XHTML1.0+ & CSS2.1 なら ID, class ともにアンダースコアで始まる名前も許されますが、普通はアンダースコアで始まる名前を付けないですよね。)

お礼

早々とお返事をありがとうございます。
「属性値」が小文字に限定されていなと伺えて安心しました。
ハイフンとアンダースコアに関しても、納得です。

全てスッキリ解決しました！

ありがとうございました。

回答No.3

tracer

正確なソースを提示できないですが、私の記憶では、すべてのブラウザ、すべてのHTMLバージョンに通じる記述は、1と4だったと思います。ハイフンはどっかでNGだったような記憶があります。
ただ、実際は1から4のどの記述方法をでも主要ブラウザで問題なく動くと思います。あまり気にしなくてもいいかも。
No.1さんのようにJavaScriptとの併用を考えるのであれば、もうすこしネーミングルールに変化をつけた方がいいかもしれませんね。

お礼

CSSの「id」「class」名って付ける時に、わりと迷いますよね。
だから簡単に2つの単語の組み合わせを使ったりしてしまいます。
今まで、アンダーバー（＿）でつなぐ事が多かったので、気になって質問しました。

ありがとうございました。

回答No.2

think49

#1 です。参考までに。

PHP: 定数 - Manual
http://php.net/manual/ja/language.constants.php

----
(ケース1)
・id="MAIN_CONTENTS"
・class="subContents"

(ケース2)
・id="MAIN_CONTENTS"
・class="sub_contents"

(ケース3)
・id="MainContents"
・class="subContents"
----

最近は (ケース1) が多いですが、改めてみると (ケース2), (ケース3) の方が統一感がありますね。

補足

think49様
ありがとうございます。
教えて頂いた情報を見る限りでは、確かに大文字を使用しても問題はなさそうですね。

私の中で、XHTMLは「タグは全て小文字」という観念があり、CSSのidやclassの名所について、大文字OKなのかわからないので質問いたしました。

XHTMLで大文字NGルールの記載が掲載されているサイト
http://web.okanos.com/html/xml_rule.shtm

上記サイトから抜粋すると・・・

>要素と属性は必ず小文字で HTML 4 では要素と属性は大文字で書いても小文字で書いてもよいのですが、XHTML では大文字と小文字は区別されます。

とあります。
要素と属性は小文字と指定がありますが、名所については記載がないのでわかりかねますね。

CSS名所が大文字で問題ないのならば、キャメルケース使用、
もしくは、think49様のように「id」「class」で分けるのが、わかりやすいですね。

念のためにこのスレは、もう少し〆ないでおきます。
何かありましたら、再度教えていただければ幸いです。

宜しくお願いします。

回答No.1

think49

> XHTMLでは大文字を使うのはNGとされているので、
XHTMLのバージョンと参考にされたサイトがあれば補足をお願いします。

私の知る限りでは XHTML1.x, XHTML5 でも id属性値, class属性値 は小文字に制限されていません。
ですので、文法上は ID, class ともに 1.～4. の全てのケースに対応できると認識しています。

CSS／日本語のID・クラス名について | OKWave
http://okwave.jp/qa/q5832331.html

> 何を使えば好ましいのか？実際は何を使うパターンが多いのか？
統一された規約はないと思いますが、私は ID は大文字から始めて、class は小文字から始めるケースが多いですね。

id="MAIN_CONTENTS"
id="MainContents"
class="main_contents"
class="mainContents"

どのパターンを使うかは好みですが、名前から ID と class のどちらを指しているのかわかるように意識しています。

・JavaScript を覚えてからはキャメルケースが違和感なく感じるようになってきました。
・大文字だけで構成すると、一部のプログラミングで使われる「定数」の命名規則に似ているので人によってはわかりやすく感じるかもしれません。