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:
- whether or not, your CSS validates to standards set by W3C.
- Normal, Properly Formatted, and Easily Readable version of your minified/compressed CSS
Do you need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!