How To Combine Duplicate Media Queries

Today, there are numerous frameworks that can help you quickly build responsive websites. Bootstrap and Foundation, for instance, come with a set of common website components, plugins, loads of pre-defined style rules as well as CSS3 media queries for constructing the responsive grid.

However, one of the downside of using these frameworks is that the media queries are scattered as they are declared and nested within the Mixins or the Functions. So you may ended up with multiple duplicated media queries throughout the codes.

Wouldn’t it be better if we could strip out these duplicates and combine them in a single CSS rule? If you agree, check out this tip.

Recommended Reading: How To Remove Unnecessary Modules In jQuery

Getting Started

This task is dependent on Grunt as well as Grunt CLI, a Node.js package for task automation. In Terminal or Command Prompt, type the following command to install Grunt CLI (Command Line).

 npm install -g grunt-cli

After running the above commands, ensure that the grunt command works. You can test it out by typing grunt --version which should show the installed Grunt version number, like so.

If, however, you encounter an error where the command is not found or recognized, head over to our previous post on how to fix it: Solving Grunt “Command Not Found” Error In Terminal [Quickfix]

Install Grunt Plugin

Navigate to the project folder, and run the following command to create a file named Gruntfile.js that will be used to specify the Grunt functions and register the Tasks.

 touch Gruntfile.js

Type these two commands below to download the Grunt module, which is required to run the task later. Also download a Grunt plugin called grunt-combine-media-queries (cmq) for combining matching media queries.

 npm install grunt --save-dev npm install grunt-combine-media-queries --save-dev

After the process is complete, you should find an additional folder named node_modules in your project directory, containing those modules.

Registering and Configuring Task

Let’s open the Gruntfile.js and put the following code in it.

 module.exports = function(grunt) { grunt.initConfig({ cmq: { options: { log: false }, your_target: { files: { 'output': ['build/*.css'] } } } }); grunt.loadNpmTasks('grunt-combine-media-queries'); grunt.registerTask('default', 'cmq'); };

This code above configures the cmq task. It contains two parameters, log and files:

The log parameter is a boolean that you can set either to true or false; if set to true it will create a log file comprised of the processed media queries.

The files parameter specifies the target files and the output folder. And given the above code example it will search all the CSS file in build folder and pass the result in the output folder. You can replace the path as per your own project configuration.

Run the Task

At this point everything has been configured; we have installed Grunt CLI, Grunt module as well as the plugin to combine media queries. Now, we just need to execute the task.

As an example, I’ve a CSS file containing several duplicated media queries as you can see below.