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

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/

Answer 2

That would be an interesting tool.

I guess my first question would be, is the code photoshop is making going to be semantic? IE. will there be one <H1> as the main topic.. and <p> for paragraphs etc.

Then when it comes to css.. you definately wont create quality code doing this. However it sounds to me, like you are not really a Front End person. That makes any answer harder..

Best Answer: Hand code it.. the code will be better. Next Answer: Hand coding out of the question? there are some other options.

• There are these companies that take your psd's and make them into semantic css/html with a 24 hour turnaround. I doubt the code is wonderful, but I am sure it's better than what you are doing with photoshop.
• Doing it yourself like you aren't wanting to do in the first place. :D

A good tutorial is here.. however, its basically helping you hand code.

Answer 3

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>