将内联样式转换为css规则[关闭]

Question

I'm interesting if there is a way to convert inline element styles to the css rules. The hardest part, I think, is to generate needed css-selectors. May be it's not possible at all, but may be there is a solution with js or php. Thank you.

For examle,

<div class="red" style="color: #red"></div>
<div style="color: #yellow"></div>
<div id="white" style="color: #white"></div>

will be converted, assuming classes and ids to

<style>
    div{color: #yellow}
    .red{color: #red}
    #white{color: #white}
</style>

<div class="red"></div>
<div></div>
<div id="white"></div>

I need this for my template generator, it preffered styles to be not inline, but in separate file or tag, so the original html code of blocks won't be changed, while editing colors, fonts, etc. I think, i explain clearly, cause english isn't my native language)

Answer 1

Try http://extractcss.com, but as @Tushar pointed out, the yellow div won't work.

Try https://github.com/jonkemp/extract-css too, which looks promising.