CSSのIDとclassの命名規則は？

質問

CSSのIDとclassの命名規則をお教えいただけますでしょうか？

なお、XHTML1.1メインでつくっているのですが、
HTMLのバージョンで違ってくるようなら、それもお教えください？

なお、出力エンコーディングはUTF-8です（関係ない？）

よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

ID属性は、
【HTML】
・HTMLでは英字から始まり、英数字と"-" と "."
・HTML4.01以降では、"_"と":"が追加

【XHTML】
・XHTMLでは、英字からまたは"_"から始まり、英数字と"-"".""_"などで":"は使えません。
・XHTMLでは、xmlからはじめることは出来ません。

　XHTMLは未来は不明なので、私は、XMLとして使うときMathMLやSVGを使うとき以外はHTML4.01に戻しましたが・・。作成が楽なので

　これはルールではありませんが、そもそもIDはリンクの終点として使うもので、スタイルシートのためにIDをつけることは基本的にありません。
　class名は、セマンティック(意味のある)なものをつけています。HTML4.01では、セマンティックな要素が絶対的に不足していたので、その反省からHTML5では、文書構造を示すセマンティックな要素が追加されます。その要素名をclass名に使うようにしています。将来、HTML5に変更するときも楽ですし、なによりも文書構造に従ったマークアップの練習になりますから。
　たとえば、
　　　HTML4.01　　　　　　　HTML5　　　用途
<div class="header">　　　<header>　　いわゆるヘッダ
<div class="section">　　 <section>　 本文
<div class="footer">　　　<footer>　　フッター
<div class="article">　　 <article>　 記事(独立しうる記事)
<div class="aside">　　　 <aside>　　 本文と関係しない記事
<div class="nav">　　　　 <nav>　　　 ナビゲーション
<span class="m">　　　　　<m>　　　　 マーク(他から参照される用語)
と言う感じで設定しています。wrapとか、contenerとか、rightとかleftとか意味のない物は使いません。
3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
・・・検索エンジンが、そこに何が書かれているか理解できるように書くように心がけています。これらのclass名は検索エンジンは理解できるようになっています。

　CSSのためにIDを書くことはまったくありませんが、class名はセマンティクなものをつける様にしています。たとえば上記以外ですとappendix(付録),siteMap(サイトマップ),note(ノート),column(コラム),newsなど・・
　そうしておくと、CSSを書くときにいちいちHTMLを開く必要もありませんし、CSSは無論、HTMLもその部分に何が書いてあるかわかります。