異なる要素または異なる幅の複数のメディアクエリを持つ方が良いですか？

Question

レスポンシブサイトを作成していますが、現在はいくつかのメディアクエリを作成しています。私が行くように私には、例えば次のように、それらを書く：

.status-reply-disabled { 
color: #B1B1B1; 
font-size: 14px; 
margin-top: 10px; 
position: absolute; 
margin-left: 65px; 
} 

@media screen and (max-width: 600px) { 
    .status-reply-disabled { 
     font-size: 10px; 
     margin-left: 35px; 
    } 
} 

そして少し後、私はこのようなものがあります：

.status-reply-avatar { 
border: 1px solid #d8d8d8; 
width: 45px; 
border-radius: 50%; 
position: absolute; 
} 

@media screen and (max-width: 600px) { 
    .status-reply-avatar { 
     display:none; 
    } 
} 

を、それはすべてを持っているために、回を処理するために、良いだろう1つの大きな質問で600pxのメディアクエリこのように：

@media screen and (max-width: 600px) { 
    .status-reply-avatar { 
     display:none; 
    } 
    .status-reply-disabled { 
     font-size: 10px; 
     margin-left: 35px; 
    } 

    ... 

    All other styles for this width 

    ... 

} 

また、私はうまくやっていますか？

Answer 1

膨大な量のコードがない場合は、パフォーマンスに関しては問題ありません。最近私はメディアにいくつかの要素の一般的なルールに常に近いいくつかのメディアクエリを書いて、単にあなたの最初の2つのコードブロックのようなものを制御することを好みます。私は実際にもっとそれが好きです。速度に関しては、それほど大きな違いはありません。

Answer 2

確かに、あなたのコードを1つのメディアクエリに入れて、同じことを行い、コードの行を減らします。DRY原則（あなた自身を繰り返さないでください）に従います。

使用すると、1つのファイルに二度同じメディアクエリを定義する場合、それは非常に良い習慣ではありません...

Answer 3

は、特定のクエリの下で一緒にすべてのコードを配置しようとすると、最大幅は= 600PX言います。これはクリーンでセマンティックなコードに適しています。デスクトップから狭い画面に移動します。画面は400pxほどです。常に良い。あなたは1週間ほど後に戻ってくると混乱します。あなたが行くにつれて幅を広げてから狭くしてください。 900pxの停止をまだ行わなかった場合は、max-width = 600pxの要素をコーディングしないでください。

Answer 4

全く違いはありません。組織の面では、以前と同じようにコードを作成し、セクションでコードを編成するか、メディアクエリ用にのみ別のCSSファイルを作成することができます。