Question

I have been improving the structure of a web app’s frontend and have done things like combine and minify css/js files, version files, and building out some templates. However I was looking at some web tools and it is saying there is a ton of unused js/css. Are there any suggestions on
-discovering the completely necessary code
-combining, minifying, and versioning the right code for the page
I am mainly looking for like a logical suggestion any code samples would be great. I am specifically using python, cheetah templates, yui-compressor, modified time for versioning, mod_rewrite and gzip on apache

Answer 1

Check out the Dust-Me Selectors Firefox extension for streamlining CSS:

Dust-Me Selectors is a Firefox
extension (for v1.5 or later) that
finds unused CSS selectors.

It extracts all the selectors from all
the stylesheets on the page you’re
viewing, then analyzes that page to
see which of those selectors are not
used. The data is then stored so that
when testing subsequent pages,
selectors can be crossed off the list
as they’re encountered.

You can test pages individually, or
spider an entire site, and you’ll end
up with a profile of which selectors
are not used anywhere.

For JavaScript, take a look at the Google Closure Compiler which can calculate codependencies within your code and remove redundancies.

The Closure Compiler is a tool for
making JavaScript download and run
faster. It is a true compiler for
JavaScript. Instead of compiling from
a source language to machine code, it
compiles from JavaScript to better
JavaScript. It parses your JavaScript,
analyzes it, removes dead code and
rewrites and minimizes what’s left. It
also checks syntax, variable
references, and types, and warns about
common JavaScript pitfalls.