Combining inline CSS into 1 external CSS automagically?!

I have about 200 static html files which contain inline CSS within <style> blocks, a lot of these content blocks are repeated in the other 200 mentioned files. Is there an application or tool out there that can extract all these style blocks and place them in 1 external file and remove duplicates?

Yes. It’s you!

If there is a tool other than that, I haven’t heard of it. It would probably be rather hit and miss anyhow, if it did exist.

Well, you could probably get there with a browser extension – that has done the hard part of figuring out what CSS rules apply to a given element.

Whatever you extract would be an ugly mess of unmaintainable poo though.

Thanks for your replies.
@ralph.m - I guess “I am the tool”, isn’t that ambiguous.
@wwb_99 - The problem is that there are multiple pages which call different parts of the file(s) so I’m not sure how to do it all but thanks anyways.

I have ended up with 1 file with all the css in and it’s 410K lines long! lol…
So now I need to get it down to a “normal” size… Oh the joy…

Minification is your friend for file size issues.

If you already are using a database for storing all of this data, you can simply add another column to your record like “custom_css” and store the CSS in there. I believe that manually extracting this data for only 200 files is a better solution than looking for a tool. If you had a few thousand pages, you might want to investigate automated tools further. But for 200, you should probably do it manually.

I don’t think its the answer you are looking for, but aptimize.com provides this as a service.

Big $, but appears to work well.

Hope this helps, Jochen

Thank you for your comments thus far