Cssセレクタ命名規則
10420 ワード
OSバージョン:Windows 7
ブラウザバージョン:IE 6,IE 7,IE 8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev
影響を受けるブラウザ:すべてのブラウザ.
よくcssセレクタの命名規則について話しますが、実はチームの協力の基礎の上でこれを言うだけではありません.ブラウザ、IE製品、火狐、アップル、グーグルは、命名が規範的ではないため、異なるスタイルを生み出します.
一、セレクタの命名について
W3C CSS2.1の4.1.3節では、識別子(セレクタ内の要素名、クラス、IDを含む)は、文字[a-zA-Z 0-9]とISO 10646文字符号化U+00 A 1以上しか含まれず、ハイフン(-)と下線();数字やハイフンの後に数字を先頭にすることはできません.これらはまた、デジタル符号化として任意のISO 10646文字を加えたエスケープ文字を含んでもよい.
設計された文字が多いため,本稿では文字[a-zA-Z 0-9]にのみ,ハイフン(-)と下線()を付ける.討論を進める.CSSで使用できる文字と大文字と小文字については、W 3 C CSS 2を参照してください.1の4.1.3節
二、差異及び発生する可能性のある問題
W 3 C CSS 2にある.1説明ドキュメントでは、セレクタ識別子のみが数字で始まるか、ハイフンの後に数字で始まることはできません.それ以外に、関連する説明はありません.では、各ブラウザの下の表現はこのルールに従っているのでしょうか.
次のコードを参照してください.
各ブラウザの下の結果を見てみましょう
上の表を見て、各ブラウザの下の表現を分析し、以下のようにまとめます.
以上から,セレクタのネーミングが各ブラウザでサポートされている状況が異なることが直感的に分かる.したがって、セレクタの名前が指定されていない場合、各ブラウザの下でスタイルレンダリングが一致しないことに影響します.たとえば、次のコードがあります.
数値で始まるクラス名はIE 6(Q)/IE 7(Q)/IE 8(Q)でのみ認識され、他のブラウザでは認識されない(この規則は無視される)
三、この問題の影響を避ける方法
セレクタの名前をアルファベットで始まるようにすると、すべてのブラウザで互換性が保証されます.
四、チームワークに関するcss命名規範
一般的なcss命名規則
ヘッド:header
内容:content/container
尾:footer
ナビゲーション:nav
サイドバー:sidebar sidebar
欄:column
ページ周辺制御全体レイアウト幅:wrapper
左右中:left right center
ログインバー:loginbar
ロゴ:ロゴ
広告:banner
ページ本体:main
ホットスポット:hot
ニュース:news
ダウンロード:download
サブナビゲーション:subnav
メニュー:menu
サブメニュー:submenu
検索けんさく:search search
友情リンク:friendlink
フッター:footer
著作権:copyright
スクロール:scroll
内容:content
ラベルページ:tab
記事リスト:list
ヒント:msg
テクニック:tips
コラムタイトル:title
加入:joinus
ガイド:guild
サービス:サービス
登録:regsiter
ステータス:status
投票:vote
パートナー:パートナ
(二)注釈の書き方:
/* Footer */
コンテンツ領域
/* End Footer */
(三)idの命名:
(1)ページ構造
コンテナ:container
ヘッダー:ヘッダー
内容:content/container
ページ本体:main
ページ末尾:footer
ナビゲーション:nav
サイドバー:sidebar sidebar
欄:column
ページ周辺制御全体レイアウト幅:wrapper
左右中:left right center
(2)ナビゲーション
ナビゲーション:nav
メインナビゲーション:mainbav
サブナビゲーション:subnav
トップナビゲーション:topnav
エッジナビゲーション:sidebar sidebar
左ナビゲーション:leftsidebar
右ナビゲーション:rightsidebar
メニュー:menu
サブメニュー:submenu
タイトル:title
概要:summary
(3)機能
ロゴ:ロゴ
広告:banner
ログイン:login
ログインバー:loginbar
登録:regsiter
検索けんさく:search search
リボン:shop
タイトル:title
加入:joinus
ステータス:status
ボタン:btn
スクロール:scroll
ラベルページ:tab
記事リスト:list
ヒント:msg
現在の:current
テクニック:tips
アイコン:icon
コメント:note
ガイド:guild
サービス:サービス
ホットスポット:hot
ニュース:news
ダウンロード:download
投票:vote
パートナー:パートナ
友情リンク:link
著作権:copyright
(四)classの命名:
(1)色:色の名前または16進コードを使用します.
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)フォントサイズ、直接「font+フォントサイズ」を名前として使用
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)整列スタイル、整列ターゲットの英語名を使用
.left { float:left; }
.bottom { float:bottom; }
(4)タイトルバースタイルは、「カテゴリ+機能」を使用して名前を付けます.
.barnews { }
.barproduct { }
注意事項:
1.すべて小文字;
2.できるだけ英語で;
3.鉄棒と下線を引かない.
4.できるだけ省略しないで、一目でわかる単語を除いて.
主なマスターcss
モジュールcss
基本共用base.css
レイアウトcss
テーマcss
コラムcss
文字fontcss
フォームcss
パッチcss
印刷css
ブラウザバージョン:IE 6,IE 7,IE 8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev
影響を受けるブラウザ:すべてのブラウザ.
よくcssセレクタの命名規則について話しますが、実はチームの協力の基礎の上でこれを言うだけではありません.ブラウザ、IE製品、火狐、アップル、グーグルは、命名が規範的ではないため、異なるスタイルを生み出します.
一、セレクタの命名について
W3C CSS2.1の4.1.3節では、識別子(セレクタ内の要素名、クラス、IDを含む)は、文字[a-zA-Z 0-9]とISO 10646文字符号化U+00 A 1以上しか含まれず、ハイフン(-)と下線();数字やハイフンの後に数字を先頭にすることはできません.これらはまた、デジタル符号化として任意のISO 10646文字を加えたエスケープ文字を含んでもよい.
設計された文字が多いため,本稿では文字[a-zA-Z 0-9]にのみ,ハイフン(-)と下線()を付ける.討論を進める.CSSで使用できる文字と大文字と小文字については、W 3 C CSS 2を参照してください.1の4.1.3節
二、差異及び発生する可能性のある問題
W 3 C CSS 2にある.1説明ドキュメントでは、セレクタ識別子のみが数字で始まるか、ハイフンの後に数字で始まることはできません.それ以外に、関連する説明はありません.では、各ブラウザの下の表現はこのルールに従っているのでしょうか.
次のコードを参照してください.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
div{width:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;}
.f-1_f_{background-color:#d4d4d4;}
.1{background-color:#A8A8A8;}
.123456{background-color:#d4d4d4;}
.2demo{background-color:#A8A8A8;}
.2-demo {background-color:#d4d4d4;}
.2_demo {background-color:#A8A8A8;}
.-demo{background-color:#d4d4d4;}
.-2demo {background-color:#A8A8A8;}
._demo {background-color:#d4d4d4;}
._2demo {background-color:#A8A8A8;}
.-{background-color:#d4d4d4;}
.---{background-color:#A8A8A8;}
._{background-color:#d4d4d4;}
.——{background-color:#A8A8A8;}
._-{background-color:#d4d4d4;}
.-_{background-color:#A8A8A8;}
.-{background-color:#d4d4d4;}
.---_{background-color:#A8A8A8;}
.---123{background-color:#d4d4d4;}
.__123{background-color:#A8A8A8;}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="f-1_f_"> </div>
<div class="1"> </div>
<div class="123456"> </div>
<div class="2demo"> + [a-z][A-Z]</div>
<div class="2-demo"> + "-" </div>
<div class="2_demo"> + "_" </div>
<div class="-demo"> (-) + [a-z][A-Z]</div>
<div class="-2demo"> (-) + </div>
<div class="_demo"> (_) + [a-z][A-Z]</div>
<div class="_2demo"> (_) + </div>
<div class="-"> (-)</div>
<div class="---"> (-)</div>
<div class="_"> (_)</div>
<div class=" "> (_)</div>
<div class="_-"> (_) + (-)</div>
<div class="-_"> (-) + (_)</div>
<div class=" -"> (_) + (-)</div>
<div class="---_"> (-) + (_)</div>
<div class="---123"> (-) + </div>
<div class=" 123"> (_) + </div>各ブラウザの下の結果を見てみましょう
上の表を見て、各ブラウザの下の表現を分析し、以下のようにまとめます.
以上から,セレクタのネーミングが各ブラウザでサポートされている状況が異なることが直感的に分かる.したがって、セレクタの名前が指定されていない場合、各ブラウザの下でスタイルレンダリングが一致しないことに影響します.たとえば、次のコードがあります.
1
2
div{font-size:12px;background-color:yellow;width:150px;height:30px;line- height:30px;}
.20fontsize{font-size:18px;background-color:#d4d4d4;}1
<div class="20fontsize"> </div>数値で始まるクラス名はIE 6(Q)/IE 7(Q)/IE 8(Q)でのみ認識され、他のブラウザでは認識されない(この規則は無視される)
三、この問題の影響を避ける方法
セレクタの名前をアルファベットで始まるようにすると、すべてのブラウザで互換性が保証されます.
四、チームワークに関するcss命名規範
一般的なcss命名規則
ヘッド:header
内容:content/container
尾:footer
ナビゲーション:nav
サイドバー:sidebar sidebar
欄:column
ページ周辺制御全体レイアウト幅:wrapper
左右中:left right center
ログインバー:loginbar
ロゴ:ロゴ
広告:banner
ページ本体:main
ホットスポット:hot
ニュース:news
ダウンロード:download
サブナビゲーション:subnav
メニュー:menu
サブメニュー:submenu
検索けんさく:search search
友情リンク:friendlink
フッター:footer
著作権:copyright
スクロール:scroll
内容:content
ラベルページ:tab
記事リスト:list
ヒント:msg
テクニック:tips
コラムタイトル:title
加入:joinus
ガイド:guild
サービス:サービス
登録:regsiter
ステータス:status
投票:vote
パートナー:パートナ
(二)注釈の書き方:
/* Footer */
コンテンツ領域
/* End Footer */
(三)idの命名:
(1)ページ構造
コンテナ:container
ヘッダー:ヘッダー
内容:content/container
ページ本体:main
ページ末尾:footer
ナビゲーション:nav
サイドバー:sidebar sidebar
欄:column
ページ周辺制御全体レイアウト幅:wrapper
左右中:left right center
(2)ナビゲーション
ナビゲーション:nav
メインナビゲーション:mainbav
サブナビゲーション:subnav
トップナビゲーション:topnav
エッジナビゲーション:sidebar sidebar
左ナビゲーション:leftsidebar
右ナビゲーション:rightsidebar
メニュー:menu
サブメニュー:submenu
タイトル:title
概要:summary
(3)機能
ロゴ:ロゴ
広告:banner
ログイン:login
ログインバー:loginbar
登録:regsiter
検索けんさく:search search
リボン:shop
タイトル:title
加入:joinus
ステータス:status
ボタン:btn
スクロール:scroll
ラベルページ:tab
記事リスト:list
ヒント:msg
現在の:current
テクニック:tips
アイコン:icon
コメント:note
ガイド:guild
サービス:サービス
ホットスポット:hot
ニュース:news
ダウンロード:download
投票:vote
パートナー:パートナ
友情リンク:link
著作権:copyright
(四)classの命名:
(1)色:色の名前または16進コードを使用します.
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)フォントサイズ、直接「font+フォントサイズ」を名前として使用
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)整列スタイル、整列ターゲットの英語名を使用
.left { float:left; }
.bottom { float:bottom; }
(4)タイトルバースタイルは、「カテゴリ+機能」を使用して名前を付けます.
.barnews { }
.barproduct { }
注意事項:
1.すべて小文字;
2.できるだけ英語で;
3.鉄棒と下線を引かない.
4.できるだけ省略しないで、一目でわかる単語を除いて.
主なマスターcss
モジュールcss
基本共用base.css
レイアウトcss
テーマcss
コラムcss
文字fontcss
フォームcss
パッチcss
印刷css