Minimize CSS length holding style of given HTML constant

Question

Suppose A.css styles B.html. What tools/techniques are there to programmatically reduce the size of A.css while holding its styling effects on B.html constant? Here are some techniques I would imagine such a tool using:

1. Remove redundancies in A.css. For example, if the same class is defined twice you can remove the second definition without affecting semantics. This seems pretty easy.

2. Remove style definitions that aren't used. Does A.css style any elements that don't appear in B.html? If so, remove them.

3. Combine styles where appropriate. If A.css defines styles for div.x and div.y and every div that happens to have class x also has class y, one could combine the class definitions in A.css.

A different strategy would be to have a tool that examines the computed styles of each element in a piece of styled HTML and spits out the minimal style sheet that would preserve the computed styles. Does something like this exist?

UPDATE

Let me explain how I got in this situation. The CSS file in question is for an email, and it was created by basically copying a similar CSS file that we used in an associated web page. Because the HTML in the email is a proper subset of the HTML in the web page from which the CSS came, some of the CSS in the email is superfluous.

Answer 1

Generally you just remove all unnecessary whitespace. Remember to keep the original as well, so you don't lose readability when editing the site later.

Answer 2

Unless you have an usually large CSS file, I would opt for readability and modifiability of the CSS file rather than having a smaller CSS file. Since CSS files are static (for the most part), most browsers will do a really good job of caching them. While all your suggestions are good ones, combining things that are the same now for different document elements can wreak havoc in the future when you only want to change one of those items.

Answer 3

I think making sure css files are gzipped by the webserver is your biggest bandwidth saver.

Answer 4

I'm not aware of tools to remove redundant styles, but if you want to reduce file size for performance reasons there are several minifing tools out there:

See:

• The art of Scaling
• A better CSS minifier

Answer 5

A good idea is to compress your css.

This isn't zip-style compressing, it's actually re-writing the CSS (aka minification). Of course, you can use mod_gzip or mod_deflate as well.

Answer 6

"Does something like this exist?"

Of course. See the CSS Tidy tool.

I do not believe that it removes unused css, though. See Sitepoint's Dust Me Selectors for that.

Answer 7

OK, you don't want a small file for the KB (using gzip compression is more effective!) but to prune the obsolete styles, which indeed would improve maintenance.

I don't know if the ideal tool you want exists, but Firebug (an extension for Firefox) can tell you want are the CSS elements used by a given HTML element. Not automated, but still a precious tool.
You can also edit the live CSS, to see if removing a style element alters the HTML page.