巨头:你CSS的所写的品质过低,看的我不舒服

巨头：你CSS的所写的品质过低，看的我不舒服。

新手：那么要如何？

巨头：一个人去提升一下。

新手：额。。。CSS还可以怎么样优化？

咳咳咳。。。我们直入主题。

当前端项目想发挥到极致性能和体验，提升CSS编码是很重要的一环。提升CSS编码可以减少页面加载时间，提高性能，提高用户体验。核心技术的同学们可曾想怎样在工程中把CSS这一环提升？

下边我们将为大家介绍提升CSS的9个方法。

1. 应用简约的选择符

选择符越少，电脑浏览器配对就越来越快。所以在撰写CSS时，应当尽量避免应用简约的选择符。比如，优先选择类选择器和标识选择符，而非id选择符和属性选择器。应该避免使用通配符选择符。

/* 提升前编码 */
#sidebar ul li a:hover {
  color: red;
}
/* 提升后编码 */
.sidebar a:hover {
  color: red;
}

2. 防止嵌入太深

嵌入太深也会增加选择符的复杂性，危害电脑浏览器特性，并且也促使编码无法维护保养。为了防止嵌入太深，可以采取命名约定，或使用子孙后代选择符取代嵌入。

/* 提升前编码 */
#header .nav ul li a {
  color: red;
}
/* 提升后编码 */
.header-nav-link {
  color: red;
}

3. 降低反复的样式

反复的样式会使CSS文档越来越松垮，提升图片大小，危害页面加载速率。假如一些款式被好几处引入，可将其界定为一个class或使用CSS自变量。

/* 提升前编码 */
#sidebar h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}
#main h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}
/* 提升后编码 */
.heading {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}

4. 尽量使用价格昂贵的特性

有一些CSS特性会影响到电脑浏览器特性，比如position、float、display等。应当尽量避免使用这个特性，或使用更轻量的替代选择。

/* 提升前编码 */
#header {
  position: absolute;
  top: 0;
  left: 0;
}
/* 提升后编码 */
.header {
  position: sticky;
  top: 0;
  z-index: 999;
}

5. 缩小CSS文档

缩小CSS文档是一种又简单又合理的改善方法。缩小CSS文档能够删掉注解和空格符等没用编码，降低图片大小，加速页面加载速率。可以用在线压缩专用工具或是构建工具全自动缩小CSS文档。

比如：

/* 缩小前编码 */
.header {
  position: sticky;
  top: 0;
  z-index: 999;
}
/* 缩小后编码 */
.header{position:sticky;top:0;z-index:999;}

6. 单用!important

!important可以优先最大操纵CSS基础属性，但是这种方式非常容易太过应用，在的CSS文档中变成程序代码错乱由来。试着尽量避免应用他们，只能在必需的情形下应用。

7. 防止使用通配符选择符

使用通配符选择符（*）会配对这些元素，这种选择符不但速度比较慢，并且可能会致使CSS标准被一些你不愿意相匹配的原素应用。因而，尽量减少使用通配符选择符。假如必须采用，也应当在选择符中加入额外约束条件来提升精准度。

8．应用CSS传承

CSS传承能够把子元素的样式设为与其说父元素同样的基础属性。此方法不但简易，并且能够减少编码量增强程序代码易读性。应用传承能够减少你页面布局里的重复代码。

9. 应用CSS预处理器

CSS预处理器（如Sass、Less、Stylus）可以让你应用自变量、嵌入、函数公式、注解等高阶作用，进而更为简约、便于维修的方法撰写CSS编码。预处理器可能全自动把这些代码转换为基准CSS词法，那样可以降低编码量与复杂性，提升研发效率。