html＆cssの効率性とパフォーマンスの問題

Question

私はいくつかのWebページをどのように実装するべきかについて問題があります。 <より多くのリンクを持っているので、より多くのHTTPリクエストがより遅くなるため、処理が遅くなるため、@mediaルールを使用してデスクトップ、タブレット、モバイルのスタイルシートを1つのCSSファイルに配置することにしました。しかし、私はすべてのページが同じヘッダーとフッターを持っているが、異なるコンテンツセクションを持つ複数のページを持っているので、私は各コ​​ンテンツのCSSをカスタマイズする必要があります。私の問題と疑問は、すべてのコンテンツのCSSを同じ単一のファイルに入れて、1つのCSSファイルがあるか、または分割して共通のCSSファイルと各ページの別のCSSがあるかどうかです。違いの例の構造：私はどのように解析されたCSSファイルはわからないんだけど、ある方法を決定することはできません

Option 1 - One single css file: 
    - home.html 
     - common.css 
    - page-one.html 
     - common.css 
    - gallery.html 
     - common.css 

=== ===または

Option 2 - Split css file: 
    - home.html 
     - common.css 
     - home.css 
    - page-one.html 
     - common.css 
     - p1.css 
    - gallery.html 
     - common.css 
     - gallery.css 

理由。私は、WebブラウザがCSSファイル全体を見て、HTMLの下から上へのタグ（つまり、#myHeader）を探して、タグが一致したときに適用すると仮定します。種類のこのよう：だから

while(!End Of *css* File){ 
    while(!EO *html* F){ 
     if(cssTag == htmlTag) 
      applyCss() 
    } 
} 

それが全体のhtmlページを経る必要があるため、この場合には、私も、現在のHTMLページに含まれていないCSSタグを前提としたい場合は、物事を遅くするでしょう次のスタイルに進む前にスタイルを適用するかどうかを指定します。オプション2ではこの問題は解決されますが、各ページに追加のHTTP要求があるという問題があります。今、私の例はわずか3ページしか持っていませんが、実際には8~10ページあります。そのページ数が多いと、現在のページでスタイルを適用するのにかかる時間が長くなり（Option1）、HTTPリクエスト（Option2）よりも大きくなります。