css压缩的技巧与工具

《css压缩的技巧与工具》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS压缩的技巧与工具点评：学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求，尤其对于大型网站来说，这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。很多人都有代码洁癖。这不是件坏事。本文将整理集中你可以用来优化你的CSS的技术，以及一些可以自动压缩你的代码的在线和桌面压缩工具。压缩还是不压缩在我们讨论如何压缩CSS之前，需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲，而且并不希望自己的代码被通过压

2、缩器去掉注释和断行。作为一个设计师，你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站，可能就没有必要做额外的压缩。同样，如果你在编写需要和一个开放团队分享的代码，插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而，如果你在设计一个需要大量CSS的大型网站，你肯定要注意你的文件大小并进你所能保持其最小。可能在寻找压缩和可能性之间的完美结合上面需要花一些时间，但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时，很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术

3、都能生成更好更有组织的代码。考虑到这一点儿，让我们开始了解一些技术已保持CSS文件最小化吧。空白样式定义让我们从明显的开始。如果你有一个空白样式，丢掉它。不要借口稍后或许会用到，你也知道它们是杂乱的。除非你有一个合理的理由，否则不要添加它们。CSS缩写是一种将多行CSS合并到单行的方法。养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。这里是个例子：长写版本:了解更多CSS缩写技巧，可以访问下面的文章：推荐阅读阿捷的文章：《》CSSSpritesCSSsprites背后的最初想法是减少HTTP请求的数量以加快页面的

4、加载时间。Sprite实现这个目标的途径就是拼合多张图片到一个单独的图片文件中，通常是一个网格格式的图片。每个单独的图片通过切换大的sprite图片的background-position来显示。对于CSS代码来说，使用sprite技术可以大大的提高代码的重用度和可维护性，这会明显的减少CSS的代码量。要了解更多关于CSSSprites，请查看ChrisCoyier在CSS-Tricks上的教程:当然，前端观察也有一些。我喜欢在代码里面使用注释。我添加的注释越多，我就能在视觉上更快的定位到代码中的不同的部分。然而，如果你需要使用少的资源

5、来高度优化的CSS，过度的注释就会吃掉宝贵的字节。所以，试着去掉所有不必要的注释并重新格式化那些你必须要保留的注释到尽可能少的字节。合理的字体类型(font-Family)当文件大小成为一个大问题的时候，不要将替代字体包进你的font-famly中。去掉所有不必要的累赘，并将你的额外选项减少到一到两个。之前:关于字体，强烈推荐阅读一下玉伯写的《》，文中提到的几篇文章也都值得我们去阅读和思考。使用16进制色彩为了减少字节数，将所有RGB色值转换成他们对应的16进制值。这开起来可能没有太大的意义，但是任何字节都是值得的！之前:查看每一个样式

6、属性，并将不需要的硬返回去掉。你也可以去掉最后一个分号。之前:10个在线CSS压缩工具CSS压缩工具可以自动完成清理你的代码的大部分工作。它们中的很多会告诉你你的文件被压缩的百分比，所以请多尝试几个以了解哪个是最好的。可选项:压缩模式:低、普通、高度压缩注释压缩:不压缩、全部、或者长于某个特定值的。可选项(每个均可选Yes或No):重排属性压缩色彩压缩font-weight小写化选择器去除不必要的空间去除不必要的分号可选项(每个均可选Yes或No):去除注释去除至少x字节长度的注释每行一个规则可选项:不删除断行(Yes或No)可以处理U

7、RL、文件或粘贴的文本等方式的CSS可选项:无可选项(每个均可选Yes或No):重排选择器重排属性优化选择器及其属性(0,1or2)合并简写属性只有安全优化压缩色彩压缩Font-weight小写化选择器属性字体(小写或大写)去除不必要的反斜杠转换!importanthack移除最后一个分号节省注释剔除无效属性(CSS2.1,CSS2.0或CSS1.0)输入为文件事实上，这就是开源项目的演示网站。CSStidy中文版：。可选项(每个均可选Yes或No):转换长色彩名为16进制转换长16进制代码为短16进制代码转换长16进制代码为色彩名字转

8、换RGB为16进制去除0度量合并同一个规则合并同一个选择器合并属性去除重复的属性从margin和padding中去除无用的值显示统计以彩色格式输出使用最小尺寸输出可选项:无可选项:截断选项:500,1000