Quick and Easy CSS Minification Using Atom
A guide to quick and easy CSS manual minification using Atom. Sometimes you don't need a build step
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
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.