I’m not sure if unminify is a word, but it is my word of the day. I didn’t know what I was doing when I minified my CSS and then couldn’t figure out how to get my CSS working again. So I thought I’d share this tutorial style blog on how to unminify your CSS so that you can actually understand it again.
The first thing you need to do is go to http://www.cssdesk.com/
I’m using the Chrome browser, so once you are there, right click anywhere on the page and select “inspect element” from the context menu:
This will bring up the Chrome developer tools with the elements tab selected like this:
See the little arrow at the top left of the screen shot? Click that and a menu will appear:
Select “Console” from that menu and you will be taken to another tab in Chrome developer tools showing something like this:
Now type this into your console (you’ll notice
I just wasted 20 minutes of my life trying to unminify a minified CSS file. And if you have ever done it before, you know exactly how long 20 minutes can feel.
It’s not that hard to minify CSS, but when you come across a minified CSS file the first time, it is easy to get confused and think it is actually a different language than CSS.
When you add all the code together (and there’s usually hundreds of lines of code), it shows up as one long string of letters, numbers, and symbols.
This is a screenshot of what minified CSS looks like:
CSS Unminifier is a free online tool for unminifying CSS code that has been minified using any of the above methods. Simply paste the compressed/minified CSS code and click on Unminify button to beautify it.
CSS can be a very hard language to work with sometimes. One of the biggest challenges with working with CSS is that it can get quite messy. This messiness can make it very difficult to debug and fix your CSS, especially when you’re working on a larger project or framework. The good news is that this doesn’t have to be the case.
One way to keep your code clean and easier to read is by using a preprocessor like Sass or Less. These can go a long way in making your code more maintainable, but they don’t always solve everything. If you’re still struggling with messy CSS, I highly recommend looking into a minifier like cssnano or csso. These programs are great for creating smaller, faster loading files; but they do it by doing things like removing whitespace and comments, which can make your CSS much harder to read and work with.
I’ve found myself struggling with this problem quite often over the years, so I thought I’d write down my solution for others who might face it as well. It’s very simple, but hopefully it will help some of you out there!
Create an Unminified Version of Your File
The first step in debugging your CSS is usually figuring out what’s wrong with it
There are many times when you are working with CSS and you end up with a stylesheet that is minified. The reason for this can happen for a number of reasons, but it is most often caused by copying the CSS from another source.
For those who do not know what I mean by minified CSS, let me show you a couple of examples.
This is an example of unminified CSS:
There are many ways to write CSS styles. The most popular way is to minify them, which means they are written in a neatly organized way to save space. When you minify CSS, you take out all spaces and line breaks so that the styles are just one big blob of text. It looks something like this:
This is usually fine, until you start using multiple-line statements (e.g. functions). Then it can get confusing as to where exactly the compiler will put the semicolons. The result is usually a syntax error.