カテゴリー:
CSS
閲覧数:614 配信日:2013-03-28 15:58
Googleコーディング規約
Google HTML/CSS Style Guide
「id」「class」名の区切り文字
・「id」「class」名はハイフンで区切る
※セレクタ内の単語や略語を、ハイフン以外の文字で連結しないでください
推奨されない例
・単語 "デモ"や "イメージ"を分離していない
.demoimage {} |
推奨されない例
・「ハイフン」の変わりに「アンダーバー」利用
.error_status {} |
推奨例
#video-id {}.ads-sample {} |
id と class の命名スタイル
・意味の分かる範囲でできるだけ短い id と class 名 を使う
・短くしすぎて意味がわからなくなるようなのはNG
・意味の分かる範囲でできるだけ短い id と class 名 を使う
・短くしすぎて意味がわからなくなるようなのはNG
そもそも「id」「class」名には何を使用できるの？
セレクタで使用できる文字
CSSのセレクタ名で使える文字は、HTMLでの名前文字より制約が厳しく、「使用できる文字は大小アルファベットと数字 [A-Za-z0-9] 、ASCII以外のUnicode文字、およびハイフン（-）とアンダースコア（_）に限る。識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない」とされています。HTMLではコロン( : )、ピリオド( . )も2文字目以降の名前文字として認められているので注意してください
HTML
・What are valid values for the id attribute in HTML?
・日本語の「id」「class」名
・CSSの変態向き - id, classを顔文字でコーディングする方法