Since the @media directive was introduced in Sass, there’s been a small debate when reviewing the CSS output. Many realized that the media query is repeated with each use as seen in this example. To some, this is a big deal and to others, not so much. This post is really for those who think that this is a big deal.
The argument you hear the most is over 'code bloat'. After all, the Sass community has been harping on 'DRY' for a years now. The fact that they are just willing to throw their arms up and say they don’t care is an interesting position. But are they really?
There are technical arguments that need to be considered. Being CSS engineers, we are very sensitive to the cascade and a few months back there was a discussion thread regarding more intelligent compression. It didn’t take long before this turned into a discussion about media queries. You are more then welcome to read the whole thread, but in the end Nathan Weizenbaum stated his point that reordering the cascade can have a negative impact on the expected results.
A developer involved early on in the thread, Aaron Jensen, was interested to see if he could solve this problem. Aaron even went as far as to engineer a new Gem that set out to do what Sass wasn’t, combine all the media query output into the foot of the processed document. Having installed this gem and played with it, I can say it works. Here is an example output.
Disclaimer: I only used this gem in small test cases. I have yet to test this in a large scale site/app.
It’s a tough nut to crack, do we really need to?
When I discovered this I wanted to exclaim, "Holy Crap! This is what I was looking for! Why is the world not talking about this?!" So I went and asked Aaron. His response was, “‘Cause it doesn’t matter.” WHAT?!
Does combining the media queries have any actual performance improvements? Are people simply raising issue because they don’t like the way the output CSS looks? That’s a damn good question and one that Aaron also raised. As he put it, "Let’s ask science!"
Aaron created a test scenario that allows you to view four example stylesheets and measure the results. He created two test cases, one w/40 queries and another w/2000. Then with each of those he made two examples, one with all the queries separate and the other where they are all combined. Click the link, see for yourself. With page load and rendering so close and the range of subtle variables in play, can you really point a finger at this as being a root cause of page performance? Looking at paint time, each block evaluating it’s media prior to painting appears to have no effect. Or at least none I could tell.
In the words of Sam Richard in regards to Breakpoint, "… we hashed out whether there were performance implications of combining vs scattering Media Queries and came to the conclusion that the difference, while ugly, is minimal at worst, essentially non-existent at best."
Does it really matter?
So here we are. Sass allows developers to make media query statements right in the module you are developing. With all great powers, we need to learn to use them responsibly. 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.
Remember, friends don’t let friends write LESS. And always remember to write Sass responsibly.