將css媒體查詢分組在一起有優勢嗎？

Question

（這可能已經被回答 - 雖然找不到答案）

傳統的@media查詢覆蓋傾向於將同一括號組下的一個大小/介質的所有覆蓋組合在一起。

例如

.profile-pic { 
    width:600px; 
} 
.biography { 
    font-size: 2em; 
} 

@media screen and (max-width: 320px) { 
    .profile-pic { 
     width: 100px; 
     float: none; 
    } 
    .biography { 
     font-size: 1.5em; 
    } 
} 

在薩斯，有寫的嵌套聲明中@media查詢重寫，像這樣一個非常巧妙的方法：

.profile-pic { 
width:600px; 
    @media screen and (max-width: 320px) { 
    width: 100px; 
    float: none; 
    } 
} 

.biography { 
    font-size: 2em; 
    @media screen and (max-width: 320px) { 
    font-size: 1.5em; 
    } 
} 

現在

，在編譯時，青菜不組@media查詢塊在一起，這樣的輸出最終被這樣的事情：

.profile-pic { 
    width:600px; 
} 
@media screen and (max-width: 320px) { 
    .profile-pic { 
    width: 100px; 
    float: none; 
    } 
} 

.biography { 
    font-size: 2em; 
} 
@media screen and (max-width: 320px) { 
    .biography { 
    font-size: 1.5em; 
    } 
} 

我已經使用這種技術最近的一個項目，當你採用這一原則，以一個更大的項目你最終萬畝ltiple @media查詢部分散佈在整個你的CSS（我到目前爲止已經有20個）。

我非常喜歡sass技術，因爲它可以更容易地遵循覆蓋流（並且還可以更輕鬆地移動東西）。

但是，我想知道是否有任何缺點，通過CSS多個@media節，特別是性能明智？

我試過chrome css分析器，但是我看不到特定於@media查詢的任何內容。

（More info on @media in sass on this page）

Answer 1

有點遲到了，但基於以下的性能影響測試似乎是最小的。該測試分別顯示了具有2000個單獨和組合媒體查詢的示例頁面的呈現時間。

http://aaronjensen.github.com/media_query_test/

主要好處似乎是在文件大小比什麼都重要 - 這，如果你壓縮你的CSS進行生產，將大幅降低反正。

但最終，如下鏈接後所說的那樣：

「如果你在你的CSS 2000+媒體查詢，我認爲你可能要重新考慮你的UI開發策略，而不是使用寶石重新處理你的CSS。「

博客文章，詳細說明問題： http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

Answer 2

我會假設，僅僅有一次運行媒體查詢檢查（然後裝入其中的所有樣式）會比在每一個選擇器判斷徵稅少，但我沒有硬這方面的證據。如果你得到Canary release of Chrome那裏有媒體查詢工具。

當你使用SASS這篇文章可能是某些利益 - http://css-tricks.com/media-queries-sass-3-2-and-codekit/