How to Streamline Your CSS by Combining Duplicate Media Queries

Today, numerous frameworks like Bootstrap and Foundation help you build responsive websites quickly. They include a variety of website components, plugins, and loads of predefined style rules, along with CSS3 media queries for crafting a responsive grid.

However, a common challenge with these frameworks is that media queries are often scattered, declared within Mixins or functions, leading to multiple duplicated media queries throughout your code.

Imagine if we could eliminate these duplicates and combine them into a single, efficient CSS rule. Interested? Follow this guide to learn how.

Set Up Your Environment

This process requires Grunt along with Grunt CLI, a Node.js package for task automation. Open your Terminal or Command Prompt and enter the following command to install Grunt CLI:

 npm install -g grunt-cli

Once installed, check that Grunt is functioning by typing grunt --version. This should display the version of Grunt installed on your system.

If you encounter an error stating the command is not found, see our guide on how to resolve the “Command Not Found” error with Grunt.

Setting Up Grunt for Your Project

In your project folder, run the following command to create a Gruntfile.js. This file will define and register your Grunt tasks:

 touch Gruntfile.js

Next, install the necessary Grunt module and a plugin named grunt-combine-media-queries (cmq) to help combine matching media queries. Enter these commands:

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

After installation, your project directory will include a new folder called node_modules, containing the newly added modules.

Setting Up and Configuring Your Task

Begin by opening your Gruntfile.js and inserting the following configuration:

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');
};

The code snippet above sets up the cmq task within your Grunt configuration. It includes two key parameters, log and files:

The log parameter is a boolean. Setting it to true will generate a log file detailing the media queries processed. This is useful for debugging and ensuring that the right queries are being combined.

The files parameter designates the source and destination for your CSS files. In the example provided, it targets CSS files in the build folder and directs the combined output to the output folder. Adjust these paths to match your project’s structure as needed.

Executing the Task

With everything set up—including the installation of Grunt CLI, the Grunt module, and the media query combining plugin—it’s now time to run the task.

Below is an example of a CSS file containing several duplicated media queries:

To execute the task, open your Terminal, make sure you’re in your project directory, and simply type grunt as shown below:

Once completed, you can compare the original and the output file. Here’s how they look:

Additional Resources

• Getting Started with GruntJS
• Grunt Combine Media Queries Repository