ブラウザのサイズに合わせてCSSの変更をインラインで書くのか、最後に書くのですか？

Question

私はダイナミックなブラウザのサイズ変更のためのいくつかのコードを書いています。私は自分のコードを置くためのベストプラクティスがどこにあるのか不思議です - 私はそれが私がいる領域に沿って書くか、戻る？

彼らは両方の仕事が、私は後でそれは地獄のように厄介だ見つけるために1つのルートにコミットする必要はありません:)

例 - 該当領域に沿ったもので

ul { 
 
    li { 
 
     font - size: 14 px; 
 
     @media screen and(max - width: 1280 px) { 
 
      font - size: 11 px; 
 
     } 
 
    } 
 
}

を置くこと

または

ul { 
 
    li { 
 
     font - size: 14 px; 
 
    } 
 
} 
 

 
@media screen and(max - width: 1280 px) { 
 
    ul { 
 
     li { 
 
      font - size: 11 px; 
 
     } 
 
    } 
 
}

0に戻っメディアクエリのみCSS3あるよう

Answer 1

W3C Webサイトの例は、私は彼らが互換性の理由から、おそらくやると信じて文書の最後にメディアクエリを置く好むように見えます。また、これにより、モバイル用のCSS構造の解析を高速化できます。 CSSパーサにクエリのセクションをまとめると、最初の読み込み時間が遅くなります。

互換性の問題を無視すると、ほとんどの場合、異なるスタイルシートであるかのように、すべてのメディアクエリを最後に配置することをお勧めします。彼らは基本的な動作を想定してそれを修正するという点で、別々のスタイルシートに似ています。バニラCSSはまだ変数をうまくサポートしていないので、最後に配置すると、デバイスの座標値を複製する手間が省けます。組織の観点から見ると、デバイス領域もおそらくトップレベルの組織構造を表します。彼らを最後に置くことは標準的なようだ。