How to read minified CSS with ease?

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!

15 thoughts on “How to read minified CSS with ease?”

  1. Leo N. says:

    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.

    1. CSSJockey says:

      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.

  2. Cody says:

    Oh nice, what a useful but effective trick.

  3. simple and effective – thx!

  4. Nikhil says:

    Awsome Man! Thnx for such a lovely tip….
    cheeeeers.

    1. Mohit Aneja says:

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

  5. Samiullah says:

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

  6. Zakir says:

    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.

  7. AlanPHP says:

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

  8. N1 says:

    Nice one Love you for that!

  9. Jami says:

    Ha genius!!!!!!!!

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

  10. Joe says:

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

    1. Mohit Aneja says:

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

  11. Toufiq says:

    helpful!

  12. Jason says:

    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.)

Leave a Comment

Your email address will not be published.*

*