从HTML元素样式属性自动生成CSS类

Question

我想知道是否有可以从HTML元素样式属性自动生成CSS类的在线软件或脚本？比如检查所有样式属性并从已发现的内容生成CSS样式表。

我想有这样的事情：

<!-- <div style="margin-top:10px; width:200px; height:100px; 
background:#ddd; border:4px solid #09f;"></div> -->
<div class="s1 s2 s3"></div>

<!-- <div style="margin-top:10px; width:180px; height:100px; 
background:#ddd; border:4px dotted #f00;"></div> -->
<div class="s2 s4 s5"></div>

<!-- <div style="margin-top:20px; width:20px; height:20px; 
border-radius:50%; background:#444;"></div> -->
<div class="s6 s7 s8"></div>

<!-- <div style="margin-top:10px; width:20px; height:20px; 
border-radius:50%; background:#3b3;"></div> -->
<div class="s0 s7 s9"></div>

JSFiddle：

BEFORE

AFTER (with the style sheet)

---

我知道你可以得到这样的样式数组：

console.log(document.getElementById('yourElement').style);

但是你如何将它与其他元素进行比较？