Have you lost the original CSS file?
All you have is the minified version?
What can you do?!
Don’t panic!
I will show you how you can un-minify it and make the changes you need for your site.
This technique will convert the minified CSS back into a form that is easy to read.
Once you have made the changes to the file I will then show you how to minify the file again.
The process of un-minifying is sometimes referred to as beautifying. As it makes the CSS look beautiful.
In other words, it makes the CSS easy to read.
Before we look at how to beautify the CSS. We should understand what happens to the CSS when we minify it?
Minify CSS Process
We minify CSS to make the file size smaller. The smaller the file, the faster it will download and the quicker our website performance will be.
A popular CSS minifying tool is CSSNano.
This takes your large CSS file and runs through a series of optimizations to produce a smaller file.
For example, taking this original CSS:
/* normalize selectors */h1::before, h1:before { /* reduce shorthand even further */ margin: 10px 20px 10px 20px; /* reduce color values */ color: #ff0000; /* remove duplicated properties */ font-weight: 400; font-weight: 400; /* reduce position values */ background-position: bottom right; /* normalize wrapping quotes */ quotes: '«' "»"; /* reduce gradient parameters */ background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%); /* replace initial values */ min-width: initial;}/* correct invalid placement */@charset "utf-8";Once we run it through CSSNano the minified output looks like this:
@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;quotes:"«" "»";background:linear-gradient(180deg,#ffe500,#ffe500 50%,#121 0,#121);min-width:0}So what has happened?
When we minify CSS we follow a series of steps, reducing the number of characters in the file, making it smaller.
The first step is to remove all whitespace from the text. This removes all newlines, tabs, and spaces.
The contents of the CSS is now on a single line.
Comments, used to make it easier for web designers and developers to read the CSS, are also removed.
There are also more subtle changes that have happened.
For example, this margin value:
h1 { margin: 10px 20px 10px 20px;}Is the same as:
h1 { margin: 10px 20px;}So tools such as CSSNano will take advantage of these optimizations for us. It's the same end result but with less characters.
Now that we have a good understanding of what these tools do. Let's look at reversing some of the changes to make it readable again.
Let's start with the fasted solution using Google Chrome “Pretty Print” function.
Pretty Print
Google Chrome has a built-in “Pretty Print” function.
This will make the file easier to read by adding back whitespace such as new lines and indentation.
To access the “Pretty Print” function, open Chrome and visit your website.
Right-click the background and choose the option “Inspect”.
This will open up the Chrome Developer Tools.
Now, click on the “Network” tab and filter by CSS.
You will then need to refresh the page.
As the page loads the CSS will appear. Click on the file and then click on the “Response” tab.
This will show you the minified CSS.
The “Pretty Print” function is a button at the bottom of the page with two brackets “{}".
Click this button to make the CSS readable.
If the file is not on the web, then this method does not help much.
You need an online tool that you can copy and paste the CSS into.
One of my go-to tools for this work is Online JavaScript Beautifier.
Online JavaScript Beautifier
This “Javascript Beautifier” by beautifier.io can un-minify HTML, CSS, and Javascript.
It's a one-stop-shop.
To un-minify your CSS select the “Beautify CSS” option from the drop-down.
Then paste your minified CSS into the main text area.
Once you are ready click on the Beautify Code button.
This will make the CSS readable, the same way as the “Pretty Print” function above.
Beautifier.io has some spin-off projects and one of those is a Chrome Extension.
Chrome Extension
The JavaScript and CSS Code Beautifier extension once installed will appear as a button next to the address bar.
This is a handy tool if you need to un-minify files frequently, that are already hosted online.
It is built on the same technology as beautifier.io so it can unminify CSS, Javascript and HTML.
To test it out add the URL of a CSS file into the address bar.
The plugin will detect the CSS and file and ask if you want to “Beautify Now”.
Click on the button and the CSS will be readable.
The plugin also has some CSS options that you can change:
- Separate selectors with newline or not
- Add a new line after every CSS rule
- Ensure space around selector separators
At the moment we have only looked at tools that you can run in a browser.
The last option we are going to look at is for use offline with local files.
Local CSS Files
Installing the Beautifier.io via the command line means that we can unminify local files.
It uses the same technology as the website and the Chrome extension. So you can unminify CSS, Javascript, and HTML.
Make sure that you have Node.js installed then open a terminal/command window.
To install run:
npm -g install js-beautifyOnce you have it installed you can make a CSS file readable using the following command:
js-beautify --type css --file cats.css100% Restoration
It’s important to state that none of these methods will restore the original CSS completely.
For example, CSSNano removes all comments as it transforms into the minified version.
Having no comments in the file can make it harder to understand what all the styles mean.
If you want to keep these comments in your CSS then it is best to have two versions of the file.
The original and the minified version.
Use the minified version on your production website. Keep the un-minified version in source control, so that you can change it in the future.
Next, we will minify the file again.
Minify
Chances are that after you have finished editing your CSS you are going to want to put it back on your site.
Before you do make sure to minify the file again.
You want your site speed to be fast so this is good practice.
By minifying the file and compressing it using GZip you can reduce the file size by 50%.
To do this we have the CSSNano Playground tool.
Paste the CSS into the left-hand text area and the CSS will show minified on the right.
Now add the minified file back to your web server.
Wrapping Up, Unminify CSS
We have shown that in an emergency there is still a way to get the CSS back that was previously minified.
Although, we can not fully restore the original file we can make it easier to read and edit.
There are a few techniques you can use to restore the CSS:
- Use Google Chrome Pretty Print
- Use the online beautifier at beautifier.io
- Use the Chrome extension
- Use the command-line tool
Choose the method that best suits your use case.
Once you have edited your file make sure that you don't need to do it again. Save the original file in source control such as Github and Bitbucket allowing you to back up code for free.
If you have a particular CSS file where these techniques did not work then leave a comment below.
