Dealing with media queries for lightweight CSS files
CSS media queries are pretty much the reason why we can now build responsive websites. They allow us to define CSS based on a number of different options but mostly we tend to use min and max width options.
There are three main methods of defining media queries currently…
<link> to an external stylesheet
This defines the media query within the <head> of the document with an extra CSS file being downloaded if the media query is matched.
<link rel='stylesheet' media='screen and (min-width: 720px)' href='css/desktop.css' />
End of Document
If including an extra file seems like overkill media queries can be collected at the base of a single CSS document.
@media screen and (min-width: 720px) {
body {
background: #ccc;
}
}
Inline using Sass (or Less)
With the help of Sass we can create Mixins to output the @media code and also nest the media query to aid development.
body {background:#000;
@include mq(720) {background:#CCC;}
}
Personal choice
Which option you use is personal choice but I like nesting my media queries, it saves scrolling back and forth between different sections of code and also helps me catch potential issues when code is changed at a late date.
But this week I noticed the main CSS for the Bronco website had ballooned to 90.6kb, a size we only tend to see for some of our large E-commerce websites.
I tried refactoring some of the CSS but could only shave off a kilobyte or two. Rather than dig further into trying to slim down our CSS I turned my attention to our media queries.
The problem
The problem with nesting CSS media queries is that the production CSS file can have a large number of media query statements, often repeating the same statement multiple times. I’d read in an article that this repetition wouldn’t have a great effect on file size so felt confident in adopting this approach.
But for the Bronco website this resulted in 224 individual @media statements.
Yet when I’d finished combining the media queries only 67 @media statements remained resulting in a 72.7kb CSS file; a 20% reduction in file size.
It’s possible these savings are less when the file is gzipped and served to the browser but I believe if you reduce the file size on the server by this much there has to be some impact on download speed.
Grunt to the rescue
When it came to combining my media queries I didn’t want to have to do this manually and remove the advantages of nesting.
With the use of Grunt combine-media-queries and cssmin I could automate the process.
Unfortunately combine-media-queries is still pretty young and offers little in the way of customisable options, it also outputs expanded code, hence the need to use cssmin as well.
I’m still very much a beginner when it comes to Grunt but after a few attempts I eventually got the modules working as needed and achieved that 20% reduction in filesize.
A tentative recommendation
Any tool that automates a process really has to be tested to ensure it suits your particular process and method of working.
In the case of combine-media-queries and its lack of customisable options one drawback is that the output order of the media queries is set and cannot be altered. If you have your media queries written in a specific order for any reason then an automated tool could result in parts of your website breaking.
But if you are currently nesting a lot of media queries similar to my example then I’d recommend testing out this module and see what affect it has on the filesize of your CSS and overall download speed of your website.
Share this article
Like what you’ve read, then why not tell others about it... they might enjoy it too
We'd love to hear from you!
If you think Bronco has the skills to take your business forward then what are you waiting for?
Get in Touch Today!
Discussion