Quick and Easy CSS Minification Using Atom

I’ve been using Jekyll today for one of our sites and we minify our CSS and include it into the head of our document. This is usually a no-no but because it’s for a simple site using a small amount of CSS, to optimise performance we decided to include it in the head of the document.

To make the file a little smaller I minified my CSS. What the hell is minification I hear you ask? Minification removes all characters that are unnecessary but leaves the remaining code functional, in my case it involved removing all whitespace characters.

So you start off with something like this (plus way more lines of code):

And end up with something like this:

So how did I do this?

First of all you need to download and install JDK. This will download Java on your machine.

Then go to Atom. Hit cmd + , which will open up your settings. Go to the install tab and search for and install atom-minify. Click the settings tab and go down to CSS -> Minifer and select clean-css.

I like to have a css file and a min.css file. I will call one style.css and the other style.min.css. One will hold the original CSS and the other the minified version. The reason I hold onto the original CSS file is because it is way easier to work with than the minified version.

So onto actually minifying. I will take a copy of my CSS from my original CSS, a quick way to do this is to hit cmd + a to select all the text and then cmd + c to copy. Then go to the minified file and hit cmd + a to select all the text again and hit cmd + v to overwrite the old code with the new code. Next comes the magic bit! Hit cmd + shift + m and all the text within the minified file becomes minified! 🎩✨

You can tell the plugin to generate the minified CSS version automatically when you save your original CSS file. The reason why I do this manually like in this example is because the majority of projects I work on have other ways of minifying CSS.