html tags to css tool

Question

I'm doing some web-dev and the designers slice and export from photoshop. The generated code is horrendous. The first thing i'm doing is taking everything out of the tags and putting them in css files. So i was wondering if there was a tool that can automate this?

Answer 1

I would write my own script, here You can take some inspiration:

1. If you know perl go to perlmonks.org/index.pl?node_id=292225
2. If you like to try and then pay search for "aggiorno-extract-merge-inline-style"
3. For jQuery see this nice script nealgrosskopf.com/tech/thread.php?pid=63

This does the opposite, but if You like Ruby, may be You can study the code: search for premailer on github, It use the Hpricot gem.

Of course, if don't want to spend time coding You can use tidy:

tidy -clean your-crap-inlined-file.html

If you your-crap-inlined-file.html contain: <p style="color:red;"> Some TEXT ...</p>

It will replace It inserting something like this

<style type="text/css">
/*<![CDATA[*/
 p.c1 {color:red;}
/*]]>*/
</style>

on top of your file and at the same time It replace your inline code with:

<p class="c1">Some TEXT ...</p>

Answer 2

HTML Tidy is a great tool. It won't do what you want exactly, but it may be a good start if you are using generated html. Here is an online instance: http://infohound.net/tidy/