Is there an advantage in grouping css media queries together?

Question

(this may have been answered already - couldn\'t find the answer though)

The traditional @media query override tends to group all the override for one size/medium un

Answer 1

A bit late to the party, but based on the tests below the performance impact seems to be minimal. The test shows the rendering times for an example page with 2000 separate and combined media queries, respectively.

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

The main benefit seems to be in file size more than anything else - which, if you're compressing your CSS for production, will be substantially reduced anyway.

But ultimately, as the linked post below puts it:

"If you have 2000+ media queries in your CSS, I think that you may want to reconsider your UI development strategy versus using a gem to re-process your CSS."

Blog post detailing the issue: https://web.archive.org/web/20140802125307/https://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

Answer 2

I would assume that just having to run the media query check once (and then loading all the styles within it) would be less taxing than checking on every selector but I've got no hard evidence of this. If you get the Canary release of Chrome there are media query tools in there.

As you're using SASS this article might be of some interest - http://css-tricks.com/media-queries-sass-3-2-and-codekit/