1. CSS の略語を使用する
略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 略語の主なルールについては、ここでは説明しませんので「一般的な CSS 略語構文の概要」を参照してください。
2. 値が 0 でない場合は単位を明確に定義してください
ディメンションの単位の定義を忘れることは、CSS の初心者によくある間違いです。 HTML では width=100 と記述するだけで済みますが、CSS では width:100px width:100em のように正確な単位を指定する必要があります。単位を定義できない例外は、行の高さと 0 の値の 2 つだけです。また、単位の後には他の値を指定する必要があります。値と単位の間にスペースを入れないように注意してください。
3. 大文字と小文字を区別する
XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。
class と id の値も HTML と XHTML で大文字と小文字が区別されます。大文字と小文字を混合して記述する必要がある場合は、CSS での定義が XHTML のタグと一致していることを注意深く確認してください。
4.classとidの前に要素制限を解除する
要素のクラスまたは ID を定義するために記述する場合、ID はページ内で一意であり、ページ内で複数回使用できるため、前の要素修飾を省略できます。要素を修飾することは意味がありません。例えば：
div#content { }
フィールドセットの詳細 { }
次のように書くことができます
＃コンテンツ { }
。詳細 { }
これにより、バイト数が節約されます。
5.デフォルト値
通常、padding のデフォルト値は 0 で、background-color のデフォルト値は透明です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のように、スタイル シートの先頭ですべての要素のマージンとパディングの値を 0 に定義できます。
* {
マージン:0;
パディング:0;
}
6. 継承可能な値を繰り返し定義する必要がない
CSSでは、親要素で定義した色やフォントなどの属性値を子要素が自動的に継承し、繰り返し定義することなく子要素に直接継承することができます。ただし、ブラウザーがいくつかのデフォルト値で定義をオーバーライドする可能性があることに注意してください。
7. 最近の第一原理
同じ要素の定義が複数ある場合、最も近い (最小レベルの) 定義が優先されます。たとえば、次のコードがあります。
更新: Lorem ipsum dolor セット
CSS ファイルでは、要素 p と classupdate を定義しました。
p {
マージン:1em 0;
フォントサイズ:1em;
色:#333;
}
。アップデート {
フォントの太さ:太字;
カラー:#600;
}
これら 2 つの定義のうち、class が p より近いため、class=update が使用されます。詳細については、W3C の「セレクターの特異性の計算」を参照してください。
8. 複数のクラス定義
タグは同時に複数のクラスを定義できます。例: まず 2 つのスタイルを定義します。最初のスタイルの背景は #666、2 番目のスタイルの境界線は 10 ピクセルです。
.one{幅:200px;背景:#666;}
.two{border:10px ソリッド #F00;}
ページのコードでは次のように呼び出すことができます
最終的な表示効果は、この div に #666 の背景と 10 ピクセルの境界線の両方があることです。はい、これは可能です、試してみてください。
9. 子孫セレクターを使用する
CSS 初心者は、サブセレクターの使用が効率に影響を与える理由の 1 つであることを知りません。サブセレクターは、多くのクラス定義を保存するのに役立ちます。次のコードを見てみましょう。
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>項目 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> アイテム 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> 項目 1</a> </li>
</ul>
</div>
このコードの CSS 定義は次のとおりです。
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
上記のコードを次のメソッドに置き換えることができます
<ul id=subnav>
<li> <a href=#> 項目 1</a> </li>
<li class=sel> <a href=#> 項目 1</a> </li>
<li> <a href=#> 項目 1</a> </li>
</ul>
スタイル定義は次のとおりです。
#サブナビ { }
#サブナヴリ { }
#サブナビ { }
#サブナビ .sel { }
#subnav .sel a { }
サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。
10. 背景画像のパスに引用符を追加する必要はありません
引用符は必要ないため、バイト数を節約するには、背景画像のパスを引用しないことをお勧めします。例えば：
背景:URL(画像
マージン:0 自動;
}
しかし、IE5/Win ではこの定義を正しく表示できません。これを解決するために、text-align 属性を使用するという非常に便利な方法を使用します。このような：
体 {
テキスト整列:中央;
}
＃包む {
幅:760ピクセル;
マージン:0 自動;
テキスト整列:左;
}
最初の本文の text-align:center; ルールは、IE5/Win の本文のすべての要素が中央に配置されることを定義し (他のブラウザーはテキストを中央に配置するだけです)、2 番目の text-align:left; は #warp でテキストを中央に配置することを定義します。左。
15. CSS のインポートと非表示
古いブラウザは CSS をサポートしていないため、一般的なアプローチは @import テクニックを使用して CSS を非表示にすることです。例えば：
@インポートURL(main.css);
ただし、この方法は IE4 では機能せず、しばらく頭が痛くなりました。後で次のように書きました。
@import main.css;
このようにして、IE4 で CSS を非表示にすることができます。笑、これで 5 バイトも節約できます。 @import構文の詳しい説明を知りたい場合は、こちら「centricleのCSSフィルターチャート」をご覧ください。
16. IEの最適化
場合によっては、IE ブラウザのバグに対して特別なルールを定義する必要があります。ここでは、CSS のサポートが Microsoft の方が優れているかどうかに関係なく、そのうちの 2 つだけを使用します。最も安全です。
1. アノテーションの方法
(a) IE で CSS 定義を非表示にするには、子セレクターを使用できます。
html>ボディp {
}
(b) 以下の記述方法はIEブラウザのみで理解可能（他のブラウザからは隠蔽されます）
* html p {
}
(c) 場合によっては、IE/Win をアクティブにして IE/Mac を非表示にしたい場合は、バックスラッシュ トリックを使用できます。
* html p {
宣言
}
2. 条件コメントの方法
CSS Hacks よりも実績のあるもう 1 つの方法は、Microsoft のプライベート属性の条件付きコメント (条件付きコメント) を使用することです。この方法を使用すると、メインのスタイル シートの定義に影響を与えることなく、IE 用にいくつかのスタイルを個別に定義できます。
17. デバッグのヒント: レイヤーの大きさはどれくらいですか?
CSS エラーをデバッグするときは、タイプライターのように CSS コードを 1 行ずつ分析する必要があります。通常、レイヤーがどれだけのスペースを占めるかが明らかになるように、問題のレイヤーに背景色を定義します。一般的には可能な border の使用を推奨する人もいますが、問題は、border によって要素のサイズが大きくなる場合があり、border-top と boeder-bottom によって垂直マージンの値が破壊されるため、background を使用する方が安全です。
問題を引き起こすことが多いもう 1 つのプロパティは、アウトラインです。アウトラインはボーダーのように見えますが、要素のサイズや位置には影響しません。アウトライン属性をサポートしているブラウザはわずかで、私が知っているのは Safari、OmniWeb、Opera だけです。
18. CSSコードの書き方
CSS コードを記述するとき、インデント、改行、スペースに関しては、誰もが独自の書き方の習慣を持っています。継続的に練習した結果、次のような書き方を採用することにしました。
セレクター1、
セレクター2 {
プロパティ:値;
}
ユニオン定義を使用するときは、通常、各セレクターを個別の行に記述して、CSS ファイル内で見つけやすくします。最後のセレクターと中括弧 { の間にスペースを追加します。また、各定義を属性値の直後に記述します。スペースは追加しないでください。
私は各属性値の後にセミコロンを追加することに慣れていますが、ルールでは最後の属性値の後にセミコロンを記述する必要はありませんが、新しいスタイルを追加する場合は、セミコロンとセミコロンの追加を忘れがちです。エラーが発生するため、追加した方がよいでしょう。
最後に、閉じ中括弧 } が単独で行に記述されます。
スペースと改行は読みやすくします。
