css , 合并重复的规则名

以后笔记里的内容同步发布到简书.
开始

image.png

---

1. 合并之前:

a{color:red;}
a{}
a{background:green;}
a{}
b{}
#a{font-size:12px;}
#a{}
#a{}
#b{}

---

2.开始合并,首先用这个在线工具:

http://www.codebeautifier.com

复制css代码,执行,发现有个问题,就是空的样式被删除了.但是其实我还要用到的,比如在chrome里调试就比较方便.
怎么做呢
把空的先改造一下,类似这样:
其中me:1这种只是为了让它不空,没实际意义,另外每项值不同,这里是递增(用sublime text可以很方便地实现)

a{color:red;}
a{me:1;}
a{background:green;}
a{me:2;}
b{me:3;}
#a{font-size:12px;}
#a{me:4;}
#a{me:5;}
#b{me:6;}

然后用改造后的代码在上面的网址试一下:
结果如图:

#a {
font-size:12px;
me:5;
}
#b {
me:6;
}
a {
background:green;
color:red;
me:2;
}
b {
me:3;
}

比较完美,再在sublime里面,用正则把没用的替换

image.png

---

最终得到:

#a { font-size: 12px; }
#b { }
a { background: green; color: red; }
b { }

合并了重复的规则,也保留了空白的规则,正是我要的,不过稍嫌麻烦.
水平有限,如果有更方便的办法,请求告知.

ps,在线工具设置:

image.png