今天一位朋友提出了一个很有意思的需要：“现在淘宝后台在不增加CSS相应权限情况下，如何把以前的Css文件里的内容快速添加到html标签上？”
为什么淘宝会这么做？
- 限制外部样式对页面的整体影响（这里指的更多的是非法操作）
- 增加一些门槛，把特权升级增加自身的收益
如何去应对？
俗话说的好“上有政策下有对策”，我们可以借助一些工具就可以很方便很快速地完成 css 文件与 html 文件的“合并”
现在就来聊下今天我们的主角，也是我们探索上述问题的一个解决方案，仅供大家参考
如何合并 css 文件与 html 文件？
其实外部css与style标签样式都是通过css选择器由浏览器的渲染引擎解析并最终添加到每个标签上的一种解耦方案，外部css 与可以充分利用浏览器的缓存机制节约网络传输成本的一个解决方案。
我们可以借助浏览器选择器把css里定义的样式都添加到相应的dom上，再生成相应的dom字符串（即html）
相关步骤如下：
-
去除css文件内容里的注释
css 的注释只有一个
/*相关注释内容*/ 分离css 选择器
遍历选择器找到相应 dom 元素并拼接style 属性内容
对属性内容进行去重去覆盖处理
得到处理后的 html
经过上述步骤已经可以得到合并之后的文件内容了。
相关链接：在线工具使用地址
