同じページで参照される2つのCSSファイルがあります。generic.cssファイルとcustom.cssファイルです。汎用ファイルには、同じ要素のcustom.cssファイルによってオーバーライドされるデフォルトのスタイルが含まれています。これにより、サイトのユーザーは、generic.cssファイル全体を再作成することなく、ページをカスタマイズまたは「スキン」することができます。いくつかのスタイルのみがオーバーライドされます。
私の質問は次のとおりです。generic.cssファイルに背景画像のある要素のスタイルがあり、同じスタイルが異なる背景画像のcustom.cssで上書きされた場合、ブラウザによって最初にダウンロードされた画像はありますか？
また、これが悪い習慣であるかどうかを調べたいと思います。一般的なCSSファイルを別のカスタムCSSファイルでカスタマイズまたは「スキニング」して、さまざまな背景画像の指定など、いくつかのスタイルをオーバーライドします。
私はNOとNOBADPRACTICEと答えたと思います。なぜなら、cssファイルがブラウザで読み取り可能/実行可能である場合、ブラウザは比較を行って、cssファイル間の同じ値または違いを見つけてからそれらを結合するからです。
簡単な例：
ファイル上のcss1.cssには次の行があります。
.test {display: block; width: 100%; height: 600px; background: #991100 url("image1.jpg") center top; border: 1px solid red;}
次に、css2.cssにも次の行があります。
.test {background: #991100 url("image2.jpg") no-repeat center center;}
ブラウザによって実行および実行される組み合わせの結果は次のとおりです。
.test {display: block; width: 100%; height: 600px; background: url("image2.jpg") no-repeat center center # 991100; border: 1px solid red}
ここで、「背景：＃991100 url（ "image1.jpg"）中央上部;」読み取りますが、ブラウザによって呼び出されたり実行されたりすることはありません。
私の知る限り、ファイルcss1.cssの値はcss2.cssの値によってスタックされます。css3.cssファイルがある場合はどうなりますか？次に、ファイルcss3.cssもcss1.cssとcss2.cssの組み合わせでスタックします。
それが役に立てば幸い。
完全に決定的なものではありませんが、このサイトはこれに関していくつかのテストを実行しました。あなたの質問に関連するそのサイトからの重要な声明は次のとおりです。
CSS画像は、CSSに表示される順序ではなく、HTMLで呼び出される順序で開始されます。ダウンロードが開始された正確な瞬間はわかりませんが、CSSルールが一致した直後、プロパティ値がDOM要素に割り当てられたときに発生すると思います。
これは、少なくとも暫定的に、数年前にこれを読んだときに覚えていると思ったこと、つまり、これまで表示されなかった背景画像（generic.css画像がcustom.css画像によって上書きされるなど）を確認します。 ）ダウンロードされることはありません。
これをさらに確認するのは、スプライト画像の前に非常に一般的であった（そして特定の用途でまだ見られる）典型的な画像プリローダースクリプトです。これは、cssで使用される画像をダウンロードするように設計されています。これが:hoverないと、最初のホバーが開始されるまで画像が読み込まれず、見苦しい遅延が発生したためです。また、実際に表示（またはプリロード）されない限り、背景画像自体がロードされることはないという事実についても主張しています。
本質的にgeneric.cssのほとんどまたはすべてをcustom.cssで上書きしない限り、「スキニング」に一般的に問題はないと思います。そうすれば、なぜジェネリックをロードするのかという議論があります。しかし、あなたが言ったように、通常、上書きされるスタイルはほんのわずかです。