CSSの名前の書き方の基準をまとめました。 _html/css_WEB-ITnose

単一行の書き方の制約
1. 各ルールの中括弧 { の前後にスペースを追加します
2. 複数のセレクターがスタイル セットを共有する場合は、複数のセレクターを複数行形式で記述する必要があります
3. ルールを終了する中括弧 } の前にはスペースが付きます
4. 属性名のコロンの前にはスペースはなく、コロンの後にはスペースが追加されます
5. 各属性の後にはセミコロンを追加する必要があります。値; セミコロンの後にスペースがあります
例:
div.test { width: 100px; height: 200px; }
a:hover { location: right: 1px;複数行の書き方の制約

1. 各ルールの中括弧 { の前にスペースを追加します
2. 複数のセレクターがスタイルセットを共有する場合、複数のセレクターは複数行形式で記述する必要があります3.各ルールの終わり } はルールセレクターの最初の文字と揃える必要があります4. 属性コロンの前にスペースを追加せず、コロンの後にスペースを追加します
5. 属性値の後にセミコロンを追加します


その他仕様

1. シングルクォートを使用します。ダブルクォーテーションは使用できません
2. CSS3 属性を使用する場合、ブラウザーのプレフィックスを追加する必要がある場合は、webkit- / -moz- / - の順に追加します。 ms- / -o- / std。標準属性は最後に記述され、属性名は次のように揃えられます。 div.animation-demo { -webkit-animation: mymove 5sfinity;アニメーション: mymove 5s 無限;
-o-animation: mymove 5s 無限;


命名規則の記述基準

1. 規則の命名では、常に大文字が使用されます。または _ は許可されません。 2. 名前付けには中国語のピンインを使用しないでください。より簡潔で意味のある英語の単語を組み合わせて使用​​する必要があります。詳しくは
4. 1、2、3などのシリアル番号による名前付けは許可されません
5. クラスとIDの重複した名前を避ける
6. IDはモジュールまたはページの親コンテナを識別するために使用されます。および名前は一意でなければなりません。 勝手に新しい ID を作成しないでください。 クラスは特定の種類のオブジェクトを識別するために使用され、名前は簡潔かつ簡潔でなければなりません。
8. コードモジュールの再利用を可能な限り改善し、スタイルの組み合わせを使用するようにしてください。 9. ルール名には、色 (赤/青)、位置 (左/右) およびその他の関連情報を含めないでください。特定の表示効果。名前には、表示結果のスタイルではなく、意味を込めて名前を付ける必要があります。 10. ブラウザのデフォルトスタイルをリセットすることに加えて、CSS スタイル設定を HTML タグに直接追加することは禁止されています。例:
div {
width: 200px;
font-size: 16px;
}
11.唯一、グローバル .nav/.header/.body およびその他のクラスの属性を直接設定することは禁止されています


属性の記述順序

推奨スタイルの記述順序
表示属性
display/list-style /position/float/clear
2. 独自の属性 (ボックスモデル)
width/height/margin/padding/border
3. 背景
background
4. テキスト属性color/font/ text-decoration/text-align /text-indent/vertical-align/white-space/content
6、other
cursor/z-index/zoom
7、CSS3プロパティ
transform/transition/animation/box-shadow/ border-radius
8, link 次の順序に従ってスタイルを追加してください:
a:link -> a:visited -> a:hover -> a:active (LoVeHAte)



1. セレクターは機能に合った位置に配置する必要があります。基本的に、セレクターのネストとクエリの消費を減らすために、セレクターはできるだけ短くしてください。ただし、グローバル スタイル設定をオーバーライドすることは避けてください。
2. セレクターのパフォーマンスに注意し、次のような低パフォーマンスのセレクターを使用しないでください。 a {}
3. CSS で * セレクターを使用することは禁止されています
4. 要素にクラスまたは ID がある場合は、通常、要素に対応するタグを記述する必要はありません。例:
div#test { width: 100px; }
5. 0 の後に単位は必要ありません。たとえば、0px は 0 に省略でき、0.8px は .8px に省略できます
6。色が 16 進数で表現される場合、色の値は次のようになります。大文字で。
7. 可能であれば、色を 3 文字で表現してください。たとえば、#AABBCC は #ABC
8 境界線がない場合は、border:0 と記述せず、border:none と記述します。 AlphaImageLoader の使用は避けてください
10. コードを分離することを前提に、繰り返しのスタイルをマージしてみます
11. 背景やフォントなど省略できる属性については、省略形を使用してみてください
hack
IE6 * html selector { … }
IE7 *+ html セレクター { … }
IE6 以外の html>body セレクター { … }
firefox @-moz-document url-prefix() { … }
safari3+/chrome @media screen および (-webkit-min-device-pixel-ratio :0) { … }
opera @media すべてと (-webkit-min-device-pixel-ratio:10000)、すべてではなく (-webkit-min-device-pixel-ratio:0) { … }
iPhone/ mobile webkit @media screen and (max-device-width: 480px) { … }
z-index 値の指定
ヘッドナビゲーション領域 [1999 - 2100]
発行者が位置するコンテンツヘッド領域 [1998]
メインコンテンツ領域ページの [-1 - 1997 ]
ページの下部 [1999 - 2100]
ホーム ページ アプリケーションのポップアップ レイヤー [1000]
全サイトのパブリック コンポーネント [-1 - 1999]
フルページのマスクされたポップ-up window コンポーネント [10000-11000]

その他
1. フォント名に対応する英語名を指定してください (例: SimHei、SimSun、Microsoft Yahei)。フォント名にスペースが含まれる場合は、一重引用符を追加する必要があります。 。
2. 背景画像には、モジュール、サービス、ページに応じて分割できる csssprite を適切に使用してください。
3. 以下の原則に従って、CSS 背景画像のファイル形式を保存してください:
3.1 背景画像にアニメーションがある場合。 、GIFとして保存します
3.2 アニメーションがなく半透明効果がない場合は、png-8として保存します
3.3 半透明効果がある場合は、png-24として保存します
4 HTMLにタグを追加してクリーンアップしないでください。フロートをクリアするには、要素に .clearfix を追加します。
5. SEO とページの使いやすさのために、テキスト コンテンツを非表示にするために text-indent を使用してください。
6. CSS スプライトを作成するときは、類似した色のアイコンをまとめて png8 形式で保存してください。また、可逆圧縮のための圧縮ツールを使用することもできます。
7. 小さすぎるタイル状の背景画像は避けてください。
8は、不位式の式を使用することを避けてください。