常见的CSS优化整理平时在项目中，涉及到方方面面的优化，CSS的优化更是不可缺少的事情，下面整理一些平时项目中用的方法。

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

平时在项目中，涉及到方方面面的优化，CSS的优化更是不可缺少的事情，下面整理一些平时项目中用的方法。

在项目中，删除不必要的css，可以加快网页的加载速度，在Chrome浏览器中，打开开发人员工具>>sources>>Coverage，可以看到未使用的css。

在css中，我们尽可能的使用缩写，可以从根本上减小css文件的大小：

p {   
padding-top: 1px;  
padding-right: 2px;  
padding-bottom: 3px;  
padding-left: 4px; }


p { padding: 1px 2px 3px 4px; }

现在都知道，@import 将 CSS 样式方便添加代码中。但是这些好处并不是没有代价的，由于 @import 可以嵌套，因此无法并行解析它们。更并行的方法是使用一系列标记，浏览器可以立即获取这些标记。

@import url("a.css");


<link rel="stylesheet" href="a.css">

一般的常识告诉我们，六位数的颜色描述符是表达颜色最有效的方式。事实并非如此，在某些情况下，速记描述或颜色名称可以更短。

div { background-color: #ffffff; }

div { background: #fff; }

CSS 支持多种单位和数字格式，但是删除尾随和跟随的零是必要的，零始终是零，添加维度不会为包含的信息附带价值。

padding: 0.2em;
margin: 20.0em;
avalue: 0px;

// 删除后
padding: .2em;
margin: 20em;
avalue: 0;

分析表明，一些标签比其他标签更昂贵。以下这些解析会影响性能—如果在没有必要的情况，尽量不要使用它们。

border-radius
box-shadow
transform
filter
:nth-child
position: fixed

空格——考虑制表符、回车符和空格——使代码更容易阅读，但从解析器的角度看，它没有什么用处。在发布前删除它们，更好的方法是将此任务委托给 shell 脚本或类似的工具。

注释对编译器也没有任何作用。创建一个自定义解析器，以便在发布之前删除它们。这不仅节省了带宽，而且还确保攻击者和克隆者更难理解手头代码背后的思想。

常见的CSS优化整理