作者: 帕兰 我们已看过8个在线CSS优化工具和CSS代码精简技巧，本文则为你带来18个CSS精简压缩工具和技巧。
压缩还是不压缩
在我们讨论如何压缩CSS之前，需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲，而且并不希望自己的代码被 通过压缩器去掉注释和断行。作为一个设计师，你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站，可能就没有必要做额外的压 缩。同样，如果你在编写需要和一个开放团队分享的代码，插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而，如果你在设计一个需 要大量CSS的大型网站，你肯定要注意你的文件大小并进你所能保持其最小。 可能在寻找压缩和可能性之间的完美结合上面需要花一些时间，但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时，很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术都能生成更好更有组织的代码。 考虑到这一点儿，让我们开始了解一些技术已保持CSS文件最小化吧。
空白样式定义
让我们从明显的开始。如果你有一个空白样式，丢掉它。不要借口稍后或许会用到，你也知道它们是杂乱的。除非你有一个合理的理由，否则不要添加它们。
缩写
CSS缩写是一种将多行CSS合并到单行的方法。 养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。这里是个例子： 长写版本:
#container{
padding-top:5px
padding-right:10px
padding-bottom:30px
padding-left:18px
}
缩写版本:
#container{
padding:5px 10px 30px 18px;
}
了解更多CSS缩写技巧，可以访问下面的文章： 
推荐阅读阿捷的文章：《常用CSS缩写语法总结》
CSS Sprites
CSS sprites背后的最初想法是减少HTTP请求的数量以加快页面的加载时间。Sprite实现这个目标的途径就是拼合多张图片到一个单独的图片文件中， 通常是一个网格格式的图片。每个单独的图片通过切换大的sprite图片的background-position来显示。对于CSS代码来说，使用 sprite技术可以大大的提高代码的重用度和可维护性，这会明显的减少CSS的代码量。
本文链接： https://erik.xyz/2015/01/12/18-ge-css-jing-jian-ya-suo-gong-ju-he-ji-qiao/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
