Today we have a quick tip for those who feel depressed and cry when they see the holy grail of CSS in one single line in their website / theme stylesheets.

Recently I started hearing from a lot of people complaining about their theme developers using minified CSS in their themes for maximizing performance without any consideration for their ease of use / customization. People keep asking me if there are tools that convert minified CSS back to normal human-readable form and recently someone even asked me to do a job – normalize some minified stylesheets (of course I didn’t do it and rob him off!)

Whether or not developers should minify CSS when giving out themes / websites has been a subject of debate for a long time but why developers choose to minify some parts of their stylesheets has often been overlooked. Performance issues for larger projects, minifying the reset styles (you don’t have to change them anyway!) and non-developer license are just some of the reasons!

Anyway, coming back to the subject of this post – How can you read minified CSS with ease?
(No, we are not going to install any 3rd party software!)

Simply validate the CSS (only the minified part if you have other files attached as well) in question using the W3C’s CSS Validation service!

The output of the validation check is:

  1. whether or not, your CSS validates to standards set by W3C.
  2. Normal, Properly Formatted and Easily Readable version of your minified / compressed CSS

You need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!

Mohit Aneja
I am an experienced designer and developer with a solid knowledge & experience of current web and mobile technology. I am a problem solver at heart and strive to develop the most effective solutions at the highest of standards and current technology.

  • Leo N.

    Lovely trick, but you should have charged him something though—expertise is not free, regardless of how much or how little effort is involved in applying it.

    • I agree with you and I could have.

      However, I believe in sharing best practices and long-term relationships. I finalized a Custom WordPress Theme project with the same person and the deal is finalized on much more I would have charged him for this simple solution and put a full stop to his trust in me. I believe sharing best practices adds a lot to your brand.

  • Oh nice, what a useful but effective trick.

  • simple and effective – thx!

  • Nikhil

    Awsome Man! Thnx for such a lovely tip….

    • Your welcome, I am glad you like this one.. Stay tuned for more..

  • Samiullah

    Before this post i was googling “deminify css” but w3c css validator does it for us!

  • Zakir

    good one. but i use firebug built-in css.its fast and quick. w3c takes time to load if my css is big. For me firebug built-in css iis fine.

  • AlanPHP

    Been searching for a way to do this for the past hour, really neat trick THANKS 🙂

  • N1

    Nice one Love you for that!

  • Jami

    Ha genius!!!!!!!!

    I spent hours looking for a good solution. Thanks a bunch!!!!

  • Joe

    Thanks for clearing the minify gimic. Any chance there is a tool to do the same for minified JS files?

    • Yes, I found one website but don’t really trust the same. You can try google search to see what’s available.

  • Toufiq


  • Jason

    I thought I’d share a little trick for inspecting minified css or JS for references.

    grep -oE '.{1,20}thing.{1,20}'

    Use it to find references to files, classes, id’s what have you, and grep will dig out the matches, with up to 20 leading / trailing chars for context. It’s pretty useful when you just want to pin down some action at a distance. Maybe you’re trampling on a .class definition, or you need a vital asset. (of course, webkit’s inspector is going to give you a heads up in most cases too.)

  • Stay up-to-date!
    Join our mailing list to receive product updates & announcements. Every month we give away FREE Licenses to our lucky subscribers.

    No Spam Ever!

Stay up-to-date!

Get notified of product updates, new products and freebies.