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 under the same bracket group.

e.g.

.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, there's a really nifty way to write @media query overrides within the nested declaration, like so:

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

now, when compiled, sass doesn't group the @media query blocks together, so the output ends up being something like this:

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

I've used this technique for a recent project and when you apply that principle to a much bigger project you end up with multiple @media query section disseminated throughout your css (i've got about 20 so far).

I quite like the sass technique as it makes it easier to follow the flow of overrides (and also makes it easier to move things around).

However, I'm wondering if there is any disadvantage in having multiple @media section through the CSS, particularly performance wise?

I've tried the chrome css profiler but I couldn't see anything specific to @media queries.

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

score 18 · Accepted Answer · edited Dec 04 '19 at 18:28

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

Thanks for this reference, that's spot on. Nice find. Tried the 2000 queries test multiple times on Chrome on iPhone 4s and there doesn't seem to be any significant difference.. — Ben, Mar 26 '13 at 21:43

score 1 · Answer 2 · answered Jul 24 '12 at 09:16

1

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/

answered Jul 24 '12 at 09:16

SpaceBeers

13,617
6
47
61

Thanks. I don't use codekit but thanks, others might find it useful. Regarding the canary release, which particular tools are you referring to? – Ben Jul 24 '12 at 10:13
There's a new audit in there for CSS selectors that tells you how long it takes each one to run. Could be useful. – SpaceBeers Jul 24 '12 at 10:16
I've got Canary but no luck. Are you referring to the _Profiles_ tab in the dev tools? There's also a separate Audits tab, but neither seem to include anything for media queries. – Ben Jul 24 '12 at 10:28
Yeah profiles. Run CSS Selectors and you will get a profile of how long things take to run. Try this with group queries and un grouped and you should be able to compare the two. – SpaceBeers Jul 24 '12 at 10:32
That's going to be a bit tedious as it doesn't highlight the cost of the media queries themselves.. I'm not sure if just measuring in Chrome is really going to be relevant in terms of performance measurement, Chrome isn't exactly the browser that struggles the most :) – Ben Jul 24 '12 at 10:39
No fair point. It might be interesting to do if you have a spare few hours but it's the only thing I could think of. – SpaceBeers Jul 24 '12 at 10:42
This is what puts me off using media queries in this fashion with SASS at the moment. I'm hoping eventually all queries that are the same get grouped into one. How easy that will be to achieve I have no idea – MrCarrot Jul 12 '15 at 14:52

Is there an advantage in grouping css media queries together?

2 Answers2

Linked