打造高性能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语法，这样能够降低代码量和复杂度，提高开发效率。