Optimize CSS

Variables, Minification, & Removing Unused CSS


Introduction

In this quick tutorial, I'll go over the process I use to transform CSS from multiple style files to a single minified production ready file. I'll be quickly explaining the following tools: Sass (variables and code reuse), Clean Css (minification), Uncss (removing unused css). Afterwards, you'll see an NPM script that runs all 3 tools to generate the final CSS file.

What This Tutorial Covers

What This Tutorial Covers
  1. Sass
  2. Clean Css
  3. UnCSS
  4. Running An NPM Script

What You Need For This Tutorial

What You Need For This Tutorial

Node & NPM. These are server side processing commands.


Installing & Using Sass

Sass (Syntactically Awesome Style Sheets) is the most popular CSS preprocesser, which is a program that combines and converts files to a single .css file. Sass uses .scss files, which are more powerful than .css because they include non-declarative programming capabilities like variables, conditionals, and loops.

A note on Sass's popularity. As of now (May 2018), using NPM statistics, the three most popular css preprocessors are Sass (node-sass), Less, and Stylus. Sass is at 2,182,645 weekly downloads (58%), Less is at 1,074,806 weekly download (28%), and Stylus is at 521,881 downloads (14%). I believe Sass being the most popular boils down to it's syntax being easier to write/understand, but that's about it. Their capabilities are all pretty much the same.

Install Sass with the following command:


npm install node-sass
      

In Sass, you typically have one main file. That main file, imports other files. So when you run the preprocessor command, you just run it on the main file. This is a simple way to separate styling domains into multiple files (for example, one file for menus and another for widgets, etc.). The example below shows a small file with import and variable syntax. For full details, check out Sass's guide: Sass Programming Guide


/* imports file called: _menu.scss */
@import 'menu';

$main-color: #efefef;

body {
  background-color: $main-color;
}
      

Installing Clean CSS

Clean CSS is a minifier. It takes your CSS and compresses it into the smallest file size possible for data transfer to client side.

Install Clean CSS with the following command:


npm install clean-css
      

Installing UnCSS

UnCSS is a tool that removes any unused CSS from your stylesheet. You feed it the HTML that uses your stylesheet, it detects what's not being used, and it removes that. This is especially great for people who use libraries like Bootstrap that has a bunch of extra styles you don't need.

Install UnCSS with the following command:


npm install uncss
      

Running The NPM Script

Now that all three tools are installed, we can set NPM to use a script that will run all three tools to create your final css file.

First, we need to tell NPM about our script. Add these fields to your package.json file:


"scripts": {
  "css":"css.js"
}
      

Create the file css.js and add the following to it:

Now to run the script, we just run the following command:


npm run css
      

Done!

That's all there is to streamlining CSS.