原文 | 経由: CSS ファイルを小さく最適化するための 9 つのヒント
著者|著者: ステファン フェルヴォート
翻訳|トランス:リュック
CSS ファイルは Web ページの先頭に読み込まれるため、各訪問者はこれらのファイルをダウンロードします。 PHP ファイルと画像は最適化されますが、CSS ファイルは無視されることがよくあります。今日、私たちはこの問題について考え、それに対して何か行動を起こす必要があります。
CSS オプティマイザーを使用して CSS を最適化することは可能ですが、以下で説明する手法を使用してコードを作成すると、効率と処理能力の両方が向上すると思います。
CSS ファイルを最適化すると、トラフィックが節約され、ページの読み込み速度が向上します。
1. コメント コメントは、一緒に作業する同僚がコードの意味を理解できるように、CSS を記述するときに特に役立ちます。注釈を付けるにはさまざまな方法がありますが、次の方法を使用できます。
/*-------------------*/
/* - - -コメント - - - -*/
/*-------------------*/
次の方法も使用できます。
/*コメント*/
これにより 20 文字が節約され、コメントが 15 件あると仮定すると 300 文字が節約されます。
2. 短縮カラーコード カラーコードは 6 文字を含む 16 進コードで定義されますが、場合によっては代わりに 3 文字を使用することもできます。次の例を見てください。
div{ color: #ffffff; } /* ショートコード: color:#fff;
div{ color: #ff88ff } /* ショートコード: color:#f8f;
div{ color: #f8f7f2 } /* ショートコードは使用できません */
3. 要素を結合します。たとえば、h2、h3、h4 などの要素が多数あり、それらがすべて同じ属性を持ち、一部の属性だけが異なる場合は、次のように記述できます:
h2、h3、h4。 {
パディング:0;
マージン:0;
色:#333;
文字間隔:.05em;
単語間隔:0.1em;
}
h2{ フォントサイズ:1.2em }
h3{ フォントサイズ:1.1em }
h4{ フォントサイズ:1em }
これにより、異なるフォント サイズ属性を宣言しながら、同じ属性を持つ要素がマージされます。スペースを大幅に節約できます。
4. 値が 0 の場合、Out Px/Em/% は省略されます。
0 には Px、Em、およびパーセント記号は必要ありません。値が 0 (これを使用すると仮定します) の場合、単位を省略すると 2 倍の文字数が節約されます。
div{ パディング: 0px 5px 5px 10px }
/* 略語: パディング: 0 5px 5px 10px;
5. 属性を結合する パディング、マージン、ボーダーなどの一部の属性は個別に記述することができます。例:padding-top、padding-right、padding-bottom、padding-left。
可能であれば、それらを組み合わせて、書きやすくスペースを節約します。
ディブ{
パディング左:0 ;
パディングトップ:50px;
パディングボトム:23px;
パディング右:4px;
/* 略語: パディング:50px 4px 23px 0;
上下の値が同じで、左右の値も同じ場合は、次のように記述できます。
div{
パディングトップ:5px;
パディングボトム:5px;
パディング左:0 ;
パディング右:0px;
/* 省略形: パディング:5px 0 */
6. クラス/ID を賢く選択する
選択したクラスと ID 名は、できるだけ短く、理解しやすく、意味のあるものにする必要があります。
「HeaderMiddleLeftCatalog」のような名前を選択することは避け、代わりに「h-cats」を使用してください。これにより多くの文字が節約されます。
7. CSS ファイルをクリーンアップしてスペースを節約します。CSS を使用して Web サイトを構築する場合、記述されたコードは機能する場合と機能しない場合があり、多くのスペースを占有します。スペースを節約するために、CSS ファイル全体にエラーや無効なコードがないかチェックする必要があります。
8. セレクターの最後の属性からセミコロンを削除します。これは、CSS コンプレッサーを使用して発見したトリックです。次の例を確認してください。
体{
背景:#ccc;
色:#333;
/* ショートコード: color:#333 */ほら、最後のセミコロンを削除しました。効果は明らかではないかもしれませんが、50 個のセレクターを少し足すと 50 文字になります。
9. 不要なスペースと復帰を削除する スペースと復帰は 1 文字を占めるため、すべて削除することができます。しかし、これの問題は、CSS の構造が破壊され、可読性が低下することです。
私にとって構造の方が重要なので、CSS ファイルを最適化するときは通常これを行いません。ここでは妥協案として、改行やスペースを含まない Web サイト上のファイルを使用します。改行とスペースを含むファイルをローカルに保存すると、編集が非常に便利になります。
結論 CSS ファイルを完全に最適化したい場合は、CSS コンプレッサーを使用することをお勧めします。これにより、上記のスキルを自分で学習し、CSS コードの作成速度と品質を向上させることができます。
他にヒントがある場合は、メッセージを残してください。