昨晚系统上线，上线测试发现页面有部分样式丢失了。看到bug会立马兴奋的我，马上睁开朦胧的双眼打开电脑，跑本地测试。咦？本地没有问题！把生产上压缩的min.css下载下来引用，发现有问题了。然后我又用webstrom格式化线上的css然后和本地做了对比，发现完全雷同。

那可以确定是css压缩后导致了样式问题，因为习惯用Java的原因，我用的老古董yuicompressor2.4.2进行压缩的。发现他会把部分空格去除，当是有些样式是必须保留空格的。

@media screen and (max-width:767px) {
}

上面的样式压缩后

@media screen and(max-width:767px) {}

and后面的空格被去除了，这个问题在我升级到yuicompressor2.4.7问题就解决了。

但是，你以为这样就完了吗？我想的太简单了

.content-body {
  width: calc(100% + 200px);
}

上面的样式压缩后

.content-body{width: calc(100%+200px)}

对，加号两边的空格删除了，坑爹的删除空格后这个样式就无效了。

好我继续升级到yuicompressor2.4.8，直接CSS压缩报错，发现是路径的问题，网上找了很久，没有很好的处理方法，我只能回退到2.4.7，然后找到了一个解决办法就是把加号变成减号，负负得正。

.content-body{width: calc(100% - -200px)}

完美解决，想来还是这个库太老古董了最后一个版本都是2013年的，CSS压缩建议使用Clean-CSS，js压缩建议使用UglifyJS，下次有时间写一个脚本来自动化压缩。