As I'm arguing that the difference between media queries grouped together and those written inline is so negligible as to be irrelevant, I'd better back that up with a little empirical evidence.
To illustrate the point, indulge me in a simple test. By the end of this chapter, there are 20 media queries defined inline for the http://sassandcompass.com site we are building.
First of all, uncompressed, the file size of the CSS itself is 14.1 KB (14,145 bytes).
If that uncompressed CSS file is gzipped, the file size comes down to 3 KB (3,058 bytes).
Let's back up and compress that CSS with Sass (using the output_style = :compressed
option in the config.rb
file). At this point, the file size comes down to 11.8 KB (11,805 bytes). This is as opposed to 14.1 KB/14,145 bytes uncompressed.
If the compressed CSS file is then gzipped, the size still only comes down to 2.7 KB (2,785 bytes). This is a slight improvement over the 3KB...