CSS optimization is the process of removing unnecessary or redundant code in CSS files to reduce file size. So here are 10 CSS optimization tools to help you optimize and organize your CSS code in quick and easy.
Helium
Helium is a tool for discovering unused CSS across many pages on a web site. The tool is javascript-based and runs from the browser.
CSS Ratiocinator
The CSS Ratiocinator automatically refactors your CSS and generates a new stylesheet for your site. It works by examining your site’s live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.
Recess
A simple and attractive code quality tool for CSS built on top of LESS.
CSS Lint
CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
StyleStats
StyleStats collect and analyze CSS statistics for any site. Similar tool that you might also like is cssstats.
Parker
Parker is a stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity.
Critical Path CSS Generator
This tool extracts only the CSS needed for the above-the-fold content for the page you specify.
css2scss
When working on projects, a tool that can quickly convert our CSS code to Sass can be ridiculously useful. This converter takes (valid) CSS and generates compass (scss) code, SASS or cleaned css for it. Just put the contents of your CSS into the field and hit the button.
mincss
Clears the junk out of your CSS by finding out which selectors are actually not used in your HTML.
CSS Minification Benchmark
A comparison of CSS minifiers for node.js.
Hi,
You could also add sitelocity.com to the list of tools. Its a tool to generate the critical css part for a given url.
Cheers