Web サイトのプロジェクトで、二次開発やブラウザーの解析など、ますます大きくなる CSS や JavaScript ファイルに直面した場合、コードを最適化する必要がありますが、最適化とは単にファイル サイズを圧縮したり縮小したりすることを意味するわけではありません。私たちが望むのは、明確な組織と高い業務効率です。では、CSS コードを改善するにはどのような方法があるのでしょうか?以下にいくつかの提案を見てみましょう。
1.
略語を使用すると、作業時間が短縮され、ファイルのサイズが小さくなります。
同様の違いに対して異なる値を設定します。
プレーンコピーをクリップボードプリントに表示しますか?
p {
マージントップ: 10px;
マージン右: 20px;
マージン-ボトム: 30px;
マージン左: 40px;
}
p {
マージントップ: 10px;
マージン右: 20px;
マージン-ボトム: 30px;
マージン左: 40px;
略語を使用します
。
プレーンコピーをクリップボードプリントに表示しますか?
p { マージン: 10px 20px 30px 40px }
p { マージン: 10px 20px 30px 40px;
よく使われるフォントの略語を見てみましょう
短縮プロパティの詳細については、「CSS 短縮ガイド (英語)」および「短縮プロパティを使用した効率的な CSS (英語)」を参照してください。
2. ハックの使用を避ける
Jon Hick のブログ hicksdesign.co.uk/journal ブラウザの条件付きコメントの使用
ハックは悪いものです。異なるブラウザに対して同じコードを定義することになり、CSS が面倒になります。ハックの代わりに条件付きコメントを使用することがわかりました。条件付きコメントは IE6 と IE7 で受け入れられ、IE チームでも条件付きコメントの使用を推奨しています。条件付きコメントを使用して、ブラウザーの機能に固有の CSS コードを提供します。そのため、標準に準拠するブラウザーに提供するために、より小さいコア CSS コードが使用されます (追加の CSS ファイルなど)。 ！
IE6 で条件付きコメントを使用したコード例を見てみましょう。
プレーンコピーをクリップボードプリントに表示しますか?
<!--[IE 6 の場合]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
<!--[IE 6 の場合]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
このコードにより、IE6 は専用の CSS コードを解析するために追加の ie6.css をダウンロードします。同様に、IE7 をターゲットにしている場合は、上記の 6 と 7 を置き換えるだけです。
3. 空白を使用する
自分で読む場合でも、二次的な開発の場合でも、空白は重要な役割を果たします。
CSS ファイルを小さくするために、タブ、改行、スペースなどの空白の書式設定をすべて削除することはお勧めしません。ネストされたコードはタブでインデントし、すべての属性を別の行に置くことをお勧めします。
上と下の写真を比較して、どちらの形式が修正時間を節約できるでしょうか?空白を使用すると、コードの管理が容易になります。
4. 冗長なフレームワークとリセットを削除する
Nathan Smith の 960 Grid System CSS フレームワークで使用されるルールをリセットする
CSS フレームワーク (自分で作成したものを含む) を使用することを選択した場合、コードをチェックすると、フレームワークに含まれるルールの一部が現在の CSS フレームワークに適用されないことが確実にわかります。ファイルを削除できます。
考えられるのはリセットです。YUI Grid CSS で使用されるリセットと Eric Meyer のリセットは、ブラウザ間でページが一貫して動作するように、さまざまなブラウザのデフォルト スタイルを削除することができます。ただし、通常、大規模な Web サイトに必要なすべての属性が含まれています。pre、code、sub、dfn、var などの一部の属性は、通常の Web サイトではまったく使用されません。使用できないものは削除してください。 Eric Meyer はあなたにも同じことをするよう勧めます。
フレームワークとリセットは作業に非常に役立ちますが、不要な使用を削除しないと、ページの効率と読みやすさが低下します。
5. 拡張CSS
Doug Bowman による Stopdesign.com CSS レイヤーに特別なセレクターを使用する
コードを最適化するもう 1 つの方法は、レイヤーごとに特定のプロパティを宣言することです。
6. 作業を文書化する
チームのコラボレーションでは、執筆標準、コーディング標準、注釈方法、およびスタイルを伝達することが非常に重要です。ルールは標準に対する一貫したアプローチに基づいています。これにより、あなたがすでに行った作業を他の人が複製することや、コードの拡張を防ぐことができます。
7. 圧縮を使用します。
ブラウザのダウンロードと読み込み時間を節約するには、圧縮を使用するのが良い解決策ですが、公開する場合に限ります。 YUI Compressor と CSSTidy は、この分野の専門家であり、冗長なコードを削除し、プロパティが互いに重複する場合のエラーを検証できます。
BBEdit、TextMate、TopStyle などの多くの一般的なエディタは、CSS コードを希望どおりにフォーマットするのに役立ちます。 PHP を使用して、サーバー圧縮テクノロジーを通じて CSS を処理することもできます。 CSS 最適化および圧縮 CSS ツールをさらに見つけることができます。
ある時点では、これらの手順によりエラーの発生が最小限に抑えられましたが、完全ではありませんでした。同様に、CSS ハックを含むファイルには使用しないことをお勧めします。これも、ハックを別のファイルに保存するもう 1 つの理由です。
仕上げる
- - - - - - - - - - - - -
- - - - - - - - - - - -----------------------------------
クリーンで最適化されたコードは、ファイル サイズだけでなく、保守性と可読性。上記の原則は CSS だけでなく、HTML、JavaScript、その他のプログラミング言語にも適用できます。 CSS ファイルは、Web サイトのエンド ユーザーに表示するためだけのものではありません。上記の原則は、ユーザー エクスペリエンスだけでなく開発者のエクスペリエンスにも役立ちます。これらの原則を将来のプロジェクトに適用すれば、必ず大きな成果が得られるでしょう。