CSS Reduction Tool

Question

Hi all, I was wondering whether anyone knows of any tools available that perform the task of analyzing one or more CSS files, determining the similarity between the various rules within the files and presenting the user with options for the merging and reduction of rulesets.

I ask this because a project I am working on has reached the point where it has so much CSS that Internet Explorer (Still the bottom line I'm afraid) chokes on the CSS after page load, causing a 3-5 second lock-up in interactivity until the choke is processed.

In case you're wondering: Yes, I am sure it is the CSS causing this issue.

Answer 1

There's the YUI CSS Compressor - you could give that a go, but I think it's more for file-size than actually combining rules.

Answer 2

try any of these links, I much prefer css tidy and have used it successfully in the past.

css optimiser

cleancss

css tidy

Answer 3

I know this isn't exactly what you're asking for and it goes the opposite and makes your css files larger, but you might get some ideas to manually optimize your CSS organized by this tool:

http://styleneat.com/index.php?PHPSESSID=j0thilea0b8sjao2vcs8g5ekh1

Again, not tools, but interesting reading:

http://code.google.com/speed/articles/optimizing-css.html http://meiert.com/en/blog/20080515/css-organization-and-efficiency/

Answer 4

Not quite what you're after, but very useful for trimming down bloated CSS:

http://www.sitepoint.com/dustmeselectors/

Firefox plugin to tell you which CSS declarations are unused.

https://addons.mozilla.org/en-US/firefox/addon/60

Firefox Web Developer Toolbar: CSS > View style information > click on a page element - This'll show you all CSS that applies to an element, and the CSS file/s it's in.