优化CSS并加速网站的21种方法
优化CSS需要一个多维的方法。虽然手工编写的代码可以使用各种技术进行简化，但是手工检查框架代码是低效的。在这些情况下，使用自动化的简化会产生更好的结果。
下面的步骤将带我们进入CSS优化的世界。并不是每一个都可以直接应用到你的项目中，但是一定要记住它们。
01.使用简写
使用缩写语句，如下面所示的margin声明，可以从根本上减小CSS文件的大小。在google上搜索CSSShorthand可以找到许多其他的速记形式。
p{margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;}
p{margin:1px2px3px4px;}
02.查找并删除未使用的CSS
删除不必要的部分CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，选择ShowCoverage，在Coverageanalysis窗口中高亮显示当前页面上未使用的代码，让您大开眼界。
03.以更便捷的方式做到这一点
在逐行分析中导航并不一定便捷，使用谷歌浏览器的Audits就可以快速帮我们分析，使用方式，打开开发者工具，点击Audits栏位，点击Runaudits后就开始分析结果。
04.注意这些问题
加载外部样式表需要花费时间，这是由于延迟造成的——因此，可以把最关键的代码位放在head中。但是，请确保不要做得过火，记住，执行维护任务的人员也必须读取代码。
.blue{color:blue;}
Hello,world!
06.允许反并行解析
@import将CSS样式方便添加代码中。遗憾的是，这些好处并不是没有代价的:由于@import可以嵌套，因此无法并行解析它们。更并行的方法是使用一系列标记，浏览器可以立即获取这些标记。
@importurl("a.css");
@importurl("b.css");
@importurl("c.css");
07.用CSS替换图片
几年前，一套半透明的png在网站上创建半透明效果是司空见惯的。现在，CSS过滤器提供了一种节省资源的替代方法。例如，以下这个代码片段可以确保所讨论的图片显示为其自身的灰度版本。
img{
-webkit-filter:grayscale(100%);
/*oldsafari*/
filter:grayscale(100%);
}
08.使用颜色快捷方式
常识告诉我们，六位数的颜色描述符是表达颜色最有效的方式。事实并非如此——在某些情况下，速记描述或颜色名称可以更短。
target{background-color:#ffffff;}
target{background:#fff;}
09.删除不必要的零和单位
CSS支持多种单位和数字格式。它们是一个值得感谢的优化目标——可以删除尾随和跟随的零，如下面的代码片段所示。此外，请记住，零始终是零，添加维度不会为包含的信息附带价值。
padding:0.2em;
margin:20.0em;
avalue:0px;
padding:.2em;
margin:20em;
avalue:0;
10.消除过多分号
这种优化需要谨慎，因为它会影响代码的更改。CSS的规范允许省略属性组中的最后一个分号。由于这种优化方法所节省的成本很小，所以我们主要针对那些正在开发自动优化的程序员说明这一点。
p{...font-size:1.33em}
11.使用纹理图集
由于协议开销的原因，加载多个小图片的效率很低。CSS精灵将一系列小图片组合成一个大的PNG文件，然后通过CSS规则将其分解。TexturePacker（
等程序大大简化了创建过程。
.download{
width:80px;
height:31px;
background-position:-160px-160px
}
.download:hover{
width:80px;
height:32px;
background-position:-80px-160px
}
12.省略px
提高性能的一个简单方法是使用CSS标准的一个特性。为0的数值默认单位是px——删除px可以为每个数字节省两个字节。
h2{padding:0px;margin:0px;}
h2{padding:0;margin:0}
13.避免需要性能要求的属性
分析表明，一些标签比其他标签更昂贵。以下这些解析会影响性能—如果在没有必要的情况，尽量不要使用它们。
border-radius
box-shadow
transform
filter
:nth-child
position:fixed;
14.删除空格
空格——考虑制表符、回车符和空格——使代码更容易阅读，但从解析器的角度看，它没有什么用处。在发布前删除它们，更好的方法是将此任务委托给shell脚本或类似的工具。
15.删除注释
注释对编译器也没有任何作用。创建一个自定义解析器，以便在发布之前删除它们。这不仅节省了带宽，而且还确保攻击者和克隆者更难理解手头代码背后的思想。
16.使用自动压缩
Yahoo的用户体验团队创建了一个处理许多压缩任务的应用程序。它以JAR文件的形式发布，可在此处获得（
并且可以使用所选的JVM运行。
java-jaryuicompressor-x.y.z.jar
Usage:java-jaryuicompressor-x.y.z.jar
[options][inputfile]
GlobalOptions
-h,--helpDisplaysthis
information
--typeSpecifiesthe
typeoftheinputfile
17.在NPM运行它
如果你希望将产品集成到Node.JS中，请访问
npmjs.com/package/yuicompressor。维护不良的存储库包含一组包装器文件和JavaScriptAPI。
varcompressor=require('yuicompressor');
compressor.compress('/path/to/
fileorStringofJS',{
//CompressorOptions:
charset:'utf8',
type:'js',
18.保持Sass的检查
虽然CSS选择器的性能不像几年前那么重要(请参阅参考资料)，但是像Sass这样的框架有时会产生非常复杂的代，不时查看输出文件，并考虑优化结果的方法。
什么是Sass？(
)
19.设置缓存
有句老话说，最快的文件永远不会通过网络发送。让浏览器缓存请求有效地实现这一点。遗憾的是，缓存头的设置必须在服务器上进行。充分上面讲的的两个Chrome工具，它们提供了一种快速分析更改结果的方法。
20.打破缓存
设计人员通常不喜欢缓存，因为他们担心浏览器会缓存上次的样式表。解决这个问题的一个简单方法是包含带有文件名的标记。遗憾的是，由于一些代理拒绝缓存具有“动态”路径的文件，此步骤所附带的代码中概述的方案并不适用于所有地方。
21.不要忘记基础知识
优化CSS只是游戏的一部分。如果你的服务器不使用HTTP/2和gzip压缩，那么在数据传输期间会损失很多时间。幸运的是，解决这两个问题通常很简单。我们的示例显示了对常用Apache服务器的一些调整。如果您发现自己在一个不同的系统上，只需参考服务器文档即可。
pico/etc/httpd/conf/httpd.conf
AddOutputFilterByTypeDEFLATEtext/html
AddOutputFilterByTypeDEFLATEtext/css