Czy istnieje korzyść w grupowaniu zapytań o media CSS?

Question

(odpowiedź mogła już zostać udzielona - nie udało się znaleźć odpowiedzi).

Tradycyjne zastąpienie zapytania @media zwykle grupuje wszystkie przesłonięcia dla jednego rozmiaru/medium pod tą samą grupą nawiasów.

np.

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

W Sass, tam naprawdę ładne sposób pisać @media przesłonięcia zapytania zagnieżdżonego w deklaracji, tak:

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

teraz, gdy kompilowany, Sass nie grupowego zapytania @media bloki razem, więc wyjście kończy się mniej więcej tak:

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

używałem tej techniki na ostatnim projekcie i kiedy zastosować tę zasadę do znacznie większego projektu skończyć z mU Sekcja kwerendy ltiple @media rozpowszechniana w całym twoim pliku css (do tej pory mam około 20).

Podobają mi się techniki sass, ponieważ ułatwia to śledzenie przepływu nadpisań (a także ułatwia przenoszenie obiektów).

Zastanawiam się jednak, czy jest jakaś wada w posiadaniu wielu sekcji @media za pośrednictwem CSS, szczególnie pod względem wydajności?

Próbowałem profilera chrome css, ale nie widziałem nic konkretnego dla @media zapytania.

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

Answer 1

Trochę późno do partii, ale na podstawie testów poniżej wpływ na wydajność wydaje się być minimalne. Test pokazuje czasy renderowania dla przykładowej strony z 2000 oddzielnymi i połączonymi zapytaniami o media.

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

Główną korzyścią wydaje się być rozmiar pliku bardziej niż cokolwiek innego - co, jeśli kompresję CSS do produkcji, będzie znacznie obniżonej tak.

Ale ostatecznie, jak poniżej połączone po to ujął:

„Jeśli masz 2000 + multimedialnych zapytań w Twojej CSS, myślę, że może warto przemyśleć swoją strategię rozwoju UI w porównaniu z zastosowaniem gem ponownie przetworzyć swój CSS. "

Blog Post szczegółowo kwestię: http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

Answer 2

Przypuszczam, że po prostu konieczności uruchamiania sprawdzanie zapytań mediów raz (a następnie ładuje wszystkie style w nim) byłby mniej opodatkowania niż sprawdzanie na każdym selektora ale mam nie ciężko dowód tego. Jeśli otrzymasz numer Canary release of Chrome, są tam narzędzia do obsługi zapytań o media.

Jak używasz Sass ten artykuł może być z pewnym zainteresowaniem - http://css-tricks.com/media-queries-sass-3-2-and-codekit/