Web优化躬行记（1）——CSS

　　Web优化的对象包括页面性能、用户体验、开发效率、代码优化、网络延迟等，本系列会列举出众多常用的优化技巧，每个技巧都可深入分析，在此只做抛砖引玉。

　　本系列优化内容提炼于《前端面试宝典》、《高效前端》、《高性能JavaScript》、《CSS重构》等书籍，以及《2020前端性能优化清单》等网络资源。

　　CSS优化包括减少样式量、合理使用CSS3特性、对样式分类、采用预处理器等。

一、CSS选择器

1）匹配优化

　　由于CSS选择器是从右往左进行匹配，因此下面的这条规则并不高效，浏览器需要遍历页面中的div元素并确定其父元素的id是否为“container”。

#container > div { }

　　最右边的参数叫关键选择器，对浏览器执行的工作量起主要影响。在优化时，可将重心放到关键选择器上。

2）保持简洁

　　虽然下面的选择器非常精确，但是一旦HTML结构发生变化，匹配就会失败。

div > nav > ul > li > a { }

　　更佳的做法是为HTML元素增加一个类，并为该类增加样式。简洁的选择器也会让CSS文件变小。

.nav-link { }

3）语义化类名

　　有意义的类名可提供恰如其分的样式信息，既能防止因细节过少而表意模糊，又能避免因信息过多而妨碍代码重用，例如用“.animal”描述动物的样式。

　　注意，也不要过于精确，例如female-black-and-white-kitten（雌性—黑—和—白—小猫）。

4）避免相同类名

　　有时候会故意写相同类名，以覆盖之前的样式。但在多人协作时，很容易因为同名而发生冲突，可以引入一个命名空间加以区分。

5）伪类的妙用

　　伪类不仅仅只是链接的悬浮、元素位置，CSS3新增了一大批伪类，既弥补了常规选择器的不同，也能解决部分页面交互。

　　例如自定义单选框的选中样式，以往得借助JavaScript，现在只需几句CSS就可完成。如下所示，为单选框声明:checked伪类，

.ui-radio span {
  display: block;
  width: 100%;
  background: #FFF;
  color: #F60;
}
.ui-radio input[type=radio]:checked ~ span {
  background: #Fc0;
  color: #FFF;
}

二、CSS属性

1）巧用继承

　　属性继承可以通过inherit关键字显式声明，而有些属性还支持自动继承，常用的包括：

　　1. 字体系列属性：font-family，font-size

　　2. 文本系列属性：text-indent，line-height，color

　　3. 元素可见性：visibility

　　4. 表格布局属性：border-style

　　5. 列表布局属性：list-style，list-style-type

　　6. 光标属性：cursor

　　布局相关的属性大都不可继承。样式多继承可以减少很多冗余代码，减小CSS文件的大小，保持高可读性，降低后期维护成本。

2）慎用!important

　　声明!important后的属性，其特殊性非常高，很容易影响别处的样式，并且在老旧项目中很难修改，会出现牵一发动全身的情况。

3）flexbox

　　弹性布局很适合移动端页面，大大简化了页面布局难度，并且已经获得了浏览器的广泛支持。

　　过去布局常会用float属性，但其实它最初的作用是为了实现文字环绕图像的效果。当用于布局时，必须清除浮动，否则会造成父元素塌陷、非浮动元素环绕等问题。

　　所以要避免使用float属性，多用弹性布局。CSS3最新的网格布局比弹性布局更加强大，给出了许多优秀的布局解决方案。

4）属性简写

　　使用属性简写，可以避免冗长的属性声明。当在大型样式表中持续使用时，节省的空间将会很可观。

.container {
  background-color: #FC0;
  background-image: url(lake.png);
  background-repeat: no-repeat;
  /* 简写 */
  background: #FC0 url(lake.png) no-repeat;
}

　　还有一种简写，可用短的属性描述相同的功能，例如当只需要声明background-color属性，可用background替代。

.container {
  background-color: #FC0;
  /* 简写 */
  background: #FC0;
}

4）减少冗余

　　将选择器之间重复的属性提取到一起，通过最小化属性声明的次数，来减少代码膨胀。

.main,
.side {
  margin: 20px;
  color: #F60;
}

5）伪元素

　　伪元素可简化页面的HTML结构，例如可用它来画那些无关紧要的分隔线，或用伪元素清除浮动、增加计数器等。

6）CSS3属性

　　CSS3提供了许多新属性，可用来替换JavaScript或图像。

　　例如CSS3的border-radius属性和border-shadow属性，可以不用再借助图像实现圆角和阴影，不仅减少了与服务器之间的通信，还加快了开发速度。

　　再例如CSS3提供了滤镜（filter）功能，不必再借助Canvas来实现滤镜的功能。还有linear-gradient()函数用于绘制渐变。

7）动画

　　很多动画现在可以由CSS3属性（animation和transition）实现，不必再借助JavaScript，减少了JavaScript的权重。由于浏览器对CSS3的原生支持，因此动画也变得更加流畅。

　　animation常与transform结合，进行多层绘制，避免触发影响渲染性能的重排和重绘。例如使用一个3D transform属性将元素提升至合成层，进行GPU图形处理加速。

.move {
  transform: translate3d(0,0,0);
}

8）will-change

　　will-change属性会告知浏览器该元素会有哪些变化，让浏览器在元素属性真正发生变化之前提前做好对应的优化准备工作。

　　例如将一部分复杂的计算工作提前准备好，加快页面反应速度。

三、代码组织

1）请求和位置

　　用link元素加载CSS可实现并行请求，并且将CSS文件放置在head中尽早加载，防止无样式的内容闪烁，加快初始页面加载时的渲染速度。

2）减少base64

　　有时候会将一些小图标转换成base64内嵌到CSS文件中，虽然这样减少了通信，但是会让CSS文件极速膨胀，需要做适当地权衡。

3）内联样式

　　如果CSS文件的内容很少，那么可以直接将其内联到HTML结构中。虽然对缓存不利，但对首次加载有很大的作用。

4）僵尸代码

　　僵尸代码是指存在但没有使用的代码，需要将它们删除。CSS中的僵尸代码具体表现为：没有使用的声明块、重复的声明块和声明语句。

5）分类

　　按照样式产生作用的顺序组织CSS代码。

　　1. 通用样式，用来设定基准，以消除不同浏览器之间的不一致性。

　　2. 基础样式，为网站的所有元素提供基本的样式，例如留白（margin和padding）、字体、颜色等。

　　3. 组件样式，添加了样式的元素或元素组合，例如进度条、弹框等。

　　4. 结构化样式，用来创建网页的布局，常用于定义尺寸。

　　5. 功能性样式，所有样式中最精确的样式，为满足单一目的而实现的样式。

　　6. 浏览器特定样式，只对特定的浏览器生效，通常不够优雅。

6）关键CSS

　　关键CSS是用户会立即看到的内容样式（即首屏样式），需要尽快加载。可将首屏样式提取到单独的文件中，或用工具将这些样式内嵌到style元素中。

　　对于首屏以外的样式，可通过preload加载，使其不阻塞渲染，如下所示，使用as来指定将要预加载的内容类型。

<link rel="preload" href="style.css" as="style">

7）CSS预处理器

　　CSS预处理器包括SASS和LESS，它们能为CSS提供了变量、函数、语句等编程特性，并引入了CSS模块化的功能。即使项目规模扩大，也能处理的游刃有余。

8）方法论

　　CSS方法论是一种面向CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。

　　这些方法论都会涉及结构化的命名约定，并且在组织CSS时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。

　　目前比较流行的三种CSS方法论：OOCSS、BEM和SMACSS。