I have a large list of CSS definitions, and I know I'm not using a lot of them. This is due to my sloppy CSS writing. (I never deleted CSS definitions that I wasn't using) The result: a large CSS file that could be a lot smaller. Is there some kind of tool that checks to see which tags and IDs your site is using from your CSS file, and which ones you arent?
Here are few free online css optimizer you may try. http://www.cssoptimiser.com/ http://flumpcakes.co.uk/css/optimiser/ http://www.cleancss.com/
Hmm. The problem is most CSS optimizers just format your code and condense properties, not cross reference it against your HTML... an HTML/CSS cross referencer actually sounds like a really good idea to me - but I've not heard of any programs that actually do it.
Which also has nothing to do with what was asked - those just strip spaces and condense properties, NOT cross reference the CSS against the HTML and remove unused classes/id's/properties.
Thanks for the backup. Perhaps this is a job I have to manually do . I bet someone could make good money if they found out how to do it!
The problem though is that HTML/CSS are a lot like Perl - there's over a million different ways to skin the same cat, and unfortunatley they're "all valid" ways of doing it. There's simply no way a program can account for all those differences.
You wouldn't have to - it's a simple programming cross reference. All that should be involved is splitting all the HTML output of a website into a dom or multiple DOM's, splitting out the classnames, ID's, etc in the various CSS files, and figuring out if the CSS is actually being used in the HTML - that's a simple cross-reference... Man, if this was Z80 assembly language I could write one in a jiffy.
You don't even need to do that, you can simply do a pattern matching (reg ex) on project or directories and sub directories of .html, .php, .asp, .aspx, .pl......and offer it as a warning. Same thing when you compile translative languages. It will show you unused declarations as warnings.
Yeah, but you'd also want to upstream nestings, so for example <div id="container"><h1>Page Title</h1><p>Test Content</p></div> we can detect "#container h1" and "#container p" separate from just h1 - which is why I was thinking you'd actually have to parse the html side properly.