ホームページ > 記事 > ウェブフロントエンド > これを読めば初心者が CSS コードを効率化して最適化する方法がわかります。
この記事の内容は、初心者が CSS コードを効率化および最適化する方法についてです。必要な方は参考にしていただければ幸いです。
#1. コメントを簡略化する
多くの場合、特に C/ などの言語開発に従事している人はそうします。 Java プログラマは、次のような複数行のコメントを書きたがるかもしれません。
もちろん、コンパイル言語ではそのようなコメントに問題はありませんが、CSS では、CSS ファイルのサイズが大幅に増加します。試してみてください。これを次のように単純化します。
これにより、読みやすさを維持しながらファイル サイズが削減されます。実際、CSS ファイルの実際に公開されたバージョンでは、これらのコメントを完全に削除できます。
2. カラー コードを簡略化する
CSS では、16 進数のカラー コードを扱うことがよくあります。次の「標準形式」を書くことに慣れているかもしれません:
color: #ffffff; color: #ff88ff;
実際、この記述は CSS で簡略化でき、次のように書くことができます:
color: #fff; color: #f8f;
3。複数行の属性ではなく単一行の属性を使用する
マージン/パディング/フォント/ボーダーなどの CSS 属性では、1 行を使用して多くの行の設定を置き換えることができます。次に例を示します。
padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0;
次のように書くことができます:
padding: 10px 0 10px 0;
もちろん、マージン属性とパディング属性の順序は、値が左右/上下が同じ場合は、もっと簡単に書くことができます。例えば上記の例は次のように書くことができます。padding: 10px 0;
上、下、左の場合
#padding: 10px;他の省略方法については、オンラインで情報を参照できます。もちろん、CSS を書く過程で学ぶために、TopStyle というソフトウェアを使用することをお勧めします。このソフトウェアは、具体的なヒントを提供します。4. 値が 0 の場合、単位は省略できます。例:padding: 0;
5 を設定します。同時に複数の値 要素の属性を例とともに示します。例:
h1 { margin: 0; padding: 0; } h2 { margin: 0; padding: 0; } h3 { margin: 0; padding: 0; }より良い書き方は次のとおりです:
h1,h2,h3 { margin: 0; padding: 0; }
6. 空白と改行を削除します
h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}
は次のように処理されます:
h1{margin:0;padding:0;} blockquote{background:#fcc;}実際、CSS ファイルには改行は必要ありません。ただし、コードを読みやすくするために、各要素を 1 行に記述することをお勧めします。現在、開発プロセスに影響を与えないように、同様のことを行うためのツールが利用可能です。
7. 有効期限を設定し、GZip を使用します。
可能であれば、CSS ファイルの有効期限を設定し、CSS ファイルの送信に対して GZip を有効にする必要があります。 。前者を設定すると、一般的なブラウザで CSS ファイルをキャッシュできるため、ロードが実行されるたびにファイルを読み取る必要がなくなり、プロセスが大幅に高速化され、同時にトラフィック消費も削減されます。 GZip を有効にすると、CSS ファイルが想像を絶する程度に圧縮される可能性があり、現在最も一般的なブラウザは GZip をサポートしています。 上記は、初心者が CSS コードを合理化して最適化する方法についての完全な紹介です。
CSS ビデオ チュートリアル
以上がこれを読めば初心者が CSS コードを効率化して最適化する方法がわかります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。