A Comparison Of The Best CSS Un-minifiers. Handy When Compiling Sass: a blog about CSS un-minifiers and compilers.
Once upon a time, I was an enthusiastic user of LESS (and even wrote about it on this blog), but these days I prefer to use Sass with the SCSS syntax. Although my opinion and thoughts on Sass vs. LESS may be fodder for another blog post, one thing I will say is that I think the Sass implementation of nested selectors is far superior to LESS’s implementation.
In particular, the ability to nest media queries makes it much easier to write responsive CSS because you don’t need to repeat selectors as often (i.e., you can keep related styles together).
I’ll admit that when I first started using Sass, I was really only using it for its nesting features, but in the last year or so I’ve come to appreciate some of its other advantages (like mixins and variables) as well.
Css un-minifiers are used to transform minified css code into regular css code. There are a lot of reasons why one would want to do this, but the most common reason is so that it’s easier to understand and debug. This is especially true if you’re working with css files that you’ve downloaded from a third party, or from a designer who has left your company. This can be very frustrating if you’re trying to figure out how a particular style is applied, or what properties exist on a particular selector.
I’ve tested each of the tools below by un-minifying the bootstrap css framework (version 2.3.0). In each case I’ve used the exact same command line options that are listed in the tool’s documentation, and I’ve taken a screenshot of the results.
There are benefits to using an online resource such as http://www.cssbeautify.com/, but for this test I decided to use only tools that can be run from the command line as they offer some additional features (such as syntax highlighting) and they’re much faster than their online counterparts.
The Winner: CSS Un-Minifier
While all of these tools do an excellent job of un-minifying css
In my last post I introduced the best css minifiers, now here are the best css un-minifiers.
Run a css minifier on the following code to see for yourself:
margin: 0 0 1em;
Michael Scharnagl wrote the first CSS un-minifier. It was written in PHP and released in 2009. It was based on John Resig’s sass formatter. This is a quote from his blog about it.
Since there is already a very nice project for formatting scss code I decided to use it for my script as well. On top of that I added some custom rules for some common properties, like margin or border . It also adds a line break after every block (elements, media query).
We set out to find the best CSS Un-minifiers. Here is what we came up with…
Beautify will output a beautifully formatted and indented version of the CSS properties that were minified. It does not deal with the selectors themselves.
CSS Tidy is a PHP tool for cleaning up CSS files. It removes comments, whitespace, redundant attributes and properties, fixes double quoted attributes, etc. It also has support for merging shorthand properties into one line.
When working with CSS on my projects, I like to have a good workflow and I use SCSS. This allows me to write CSS in a more efficient manner and I can do some interesting things with it.
I was looking for a service that would unminify my CSS, so that I could work with the code. Here are the ones I found. Most of these services can also minify your code if you want to do that.
1)CSS Beautify (http://cssbeautify.com/)
CSS Beautify is available as an online service and there is also a bookmarklet which you can drag into your bookmarks bar, then click when you are on any site with CSS, to unminify the CSS.
The code is colorized, making it easier to read than plain text. The options include:
Fix tags – Fixes unclosed or missing tags (in case the original was not minified).
Colorize – Colorizes the code for ease of reading
2)CSS Unminifier (http://mrcoles.com/cssunminifier/)