Optimizing CSS code is not just about reducing the file size but making the code effective, well organized and clean. Non-valid CSS files might be messy and can result in errors. So, following are some handy web based tools to help you optimize and organize your CSS code in quick and easy steps.
CSS Optimizer
CSS Optimizer is a web utility for optimizing your style sheets. You can optimize your CSS via a URI, file upload or by direct input. You can opt whether or not to have line breaks in the output code. Once optimized, the CSS optimizer will provide you with the file sizes before and after optimization and the savings. You can either copy the optimized code directly or use a direct link to the style sheet (css file).
This tool takes a CSS file as input and parses and outputs an organized and effective version of the code, removing any redundancies and attributes which are not needed. It basically removes comments and white spaces, converts multiple border values into single attributes. It converts RGB values to Hex code and changes values such as border: 1px 2px 1px 2px;Â to border: 1px 2px;.
Clean CSS is a handy resource for web developers and designers. It’s an effective CSS optimizer and formatter. Basically, it takes your CSS code and makes organized and clean. It helps you with shorthand coding and helps you get reduced CSS file sizes and well formatted code. It provides you with options to removed unnecessary backslashes and optimizes selectors and their properties. You can even choose the compression standard ranging between readability and file size.
Code beautifier is a CSS formatter and optimizer based on CSS Tidy 1.3. Similar to that of Clean CSS mentioned above, you can choose the compression standard. Other options include sorting selectors and properties.
You can choose to discard invalid properties, include a timestamp and output the code as a file.
Related: 40+ CSS Tools
Daniel says
hi srikanth,
i also have used css compression, but after this, for us developer its more difficult to change elements, when the are grouped togehter….
imho, today browser are getting faster to parse css, and so for me its more important to clean up some selectors, than grouping css elements togehter.
i know a firefox addon, which can show unused css parts, this will be important, or not?
lovely ping to you and india, daniel from cologne, europe
Srikanth AD says
Hi Daniel,
Lets discuss this in detail. I went through your blog, but couldn’t find your email id.
Pls check my site and get in touch with me.