css - ヘッダーに複数のCSSファイルがありますか？

Question

ヘッダーに2つのCSSファイルがあるPHPスクリプトがあります。CSSファイルの1つには、約5行の短い行しかありません。

それをより大きなCSSファイルに移動しても安全ですか？1つがほんの数行であるときに2つの別々のCSSファイルを持つことの意味は何ですか？

score 1 · Accepted Answer

はい、彼らはその中のポイントです。たとえば、すべての色を処理するdesign.css、配置とサイズのために純粋なlayout.cssがあり、アニメーションなどを処理するinteraction.cssがあります。

file1.css file2.css

結果は、同じ順序で以下のコードを含むファイルになります。

/* content of file1.css */
/* content of file2.css */

score 0 · Accepted Answer

まったく意味がありません（この場合）。数行を別の行に移動する必要があります。2つの別々のファイルがある場合、サーバーへのリクエストは2つあります。これらはミリ秒であるため、おそらく違いはわかりませんが、この場合は「ベストプラクティス」になります。

score 0 · Accepted Answer

本質的には、ブラウザがページに関連するコンテンツのみをロードするのに役立ち、ページのロード時間を短縮します。

ダウンロードしたCSSのどれだけが特定のページに適用されたかを示すことができるサービスがあります。

score 0 · Accepted Answer

同じファイルに移動してはいけない理由はありません。

CSSファイルは必要な数だけ持つことができます。

利点は、スタイルの数が非常に多く、CSSファイルが大きくなって読めなくなった場合にのみ実際にあります。次に、それらを分解することは理にかなっています。または、ページごとに分割したい場合など。

サーバーへの追加のリクエストであり、5行だけでは意味がないようです。

score 0 · Accepted Answer

PHPスクリプトが数行しかないCSSファイルを参照していないことを確認してください。そうでない場合は、2つをマージすることができます。参照している場合は、次のように、大きいCSSファイル内で短いCSSファイルを呼び出すことを検討してください。

@import url('/css/smaller-file.css');

これをより大きなCSSファイルに追加すると、PHPヘッダーにより大きなCSSファイルを含めることができるはずです。

お役に立てれば！

score 0 · Accepted Answer

もちろん、コンテンツを整理するために任意の言語のファイルを多数持つことのポイントがあるのと同じように、ポイントがあります。

多くのリクエストがあるとパフォーマンスに大きな負担がかかるため、通常の解決策（および私のもの）は、ビルドスクリプトを使用して、ディレクトリのすべてのCSSファイルを1つに連結することにより、本番環境でバージョンをビルドすることです。それを行う正確な方法はあなたの建物に依存します

これは、連結および縮小されたJSファイルで行われることと似ていることに注意してください。

6 に答える 6