Gibt es einen Vorteil in Abfragen CSS Medien Gruppierung zusammen?

Question

Die traditionelle @ media Query Override neigt dazu, alle Override für eine Größe/Medium unter der gleichen Klammergruppe zu gruppieren.

z.B.

.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; 
    } 
} 

In Sass, eine wirklich nette Art und Weise ist @media Abfrage überschreibt in der verschachtelten Erklärung, wie so zu schreiben:

.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; 
    } 
} 

jetzt, wann dann kompiliert, sass nicht Gruppe die @media Abfrage so etwas wie diese Blöcke zusammen, so dass der Ausgang endet als:

.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; 
    } 
} 

ich habe diese Technik für ein neues Projekt verwendet und wenn man dieses Prinzips auf ein viel größeres Projekt gilt am Ende mit mu bis ltiple @media query section disseminiert in Ihrem css (ich habe bisher etwa 20).

ich ganz wie die sass Technik, wie sie es leichter folgen dem Fluss von Überschreibungen (und macht es auch einfacher, um Dinge zu bewegen) machen.

aber ich frage mich, ob es ein Nachteil ist, mehrere @media Schnitt durch die CSS, insbesondere Leistung weise in zu haben?

Ich habe die Chrom CSS Profiler versucht, aber ich konnte nicht etwas Bestimmtes sehen Abfragen @media.

(More info on @media in sass on this page)

Answer 1

Ein bisschen spät, um die Partei, sondern auf der Grundlage der Tests unter den Auswirkungen auf die Leistung scheint minimal zu sein. Der Test zeigt die Rendering-Zeiten für eine Beispielseite mit jeweils 2000 separaten und kombinierten Medienabfragen.

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

Der Hauptvorteil scheint sonst in der Dateigröße mehr als alles andere zu sein - was, wenn Sie Ihre CSS für die Produktion sind komprimiert, im wesentlichen ohnehin reduziert werden.

Aber letztlich, wie der verlinkten Beitrag unten sagt:

„Wenn Sie 2000+ Medienanfragen in Ihrem CSS haben, denke ich, dass Sie möchten, können Sie Ihre UI Entwicklungsstrategie zu überdenken im Vergleich zu einem Juwel unter Verwendung zu dein CSS neu verarbeiten. "

Blog post Detaillierung der Ausgabe: http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

Answer 2

Ich würde davon ausgehen, dass nur ein einziges Mal die Medienabfrage Prüfung ausführen zu müssen (und dann die Stile alle in dem Laden) weniger belastend wäre auf jeden Wähler als Kontrolle, aber ich habe keine harten bekam Beweise dafür. Wenn Sie die bekommen, gibt es Media-Abfrage-Tools dort.

Wie Sie SASS verwenden dieser Artikel könnte von Interesse sein - http://css-tricks.com/media-queries-sass-3-2-and-codekit/