CSS的CSS压缩方法

html-css024

CSS的CSS压缩方法,第1张

理想的情况是只拥有一个CSS文件(如果你使用RWD以支持IE的老版本,那就需要两个CSS文件。)构建并维护几个单独的CSS文件也算合理,但在部署到产品服务器之前,你应该将它们集合在一起,并删掉那些不必要的空白区域。

Saas、LESS和Stylus等预处理器可帮你完成这些痛苦的工作。 Grunt.js、 Gulp等工具可自动化你的工作流。如果你更喜欢GUI,可借助Koala提供的免费跨平台应用。

如果你觉得这些比较麻烦,也可手动通过命令行工具将CSS文件集中在一起,如在Windows中,可使用如下代码:

在Mac/Linux中,可使用如下代码:

最终文件经过在线CSS压缩工具(如 cssminifier.com、 CSS Compressor &Minifieror等)压缩后即可运行。

最后,请记住在头部(Head)加载所有CSS,以便浏览器展示接下来的HTML元素,同时也可避免浏览器下次再重绘页面元素。

第一步:需要掌握css的缩写技巧

参考下面的文章即可

CSS缩写优化CSS文件的体积

CSS常用属性缩写实例[推荐]

第二步:用css在线格式化与压缩工具

第三步:测试,看看经过压缩后的css文件,会不会导致页面变形等问题,一般情况下不会,不排除特殊情况。别忘了备份样式文件啊。

个人建议从几个方面入手:

1、在服务器上启用GZIP压缩,添加css等静态文件等。

2、把主页、内容页的CSS分开写,公共部分单独用一个CSS,这样就可以减少CSS的大小。

3、优化CSS语法,并可以使用工具压缩,但要注意用多个浏览器测试。

4、将一些JS调用尽量放到网页底部