これを読めば初心者が 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. 空白と改行を削除します

これは非常に重要です。目立たない操作ですが、これは開発段階を終了し、インターネット上で適用される CSS に対して行う必要があります。少なくとも、これはすべての Google アプリケーションで行われる方法です。たとえば:

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 ビデオ チュートリアル

に注目してください。 PHPの中国語サイトです。

以上がこれを読めば初心者が CSS コードを効率化して最適化する方法がわかります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。