css面试题（7）CSS优化、提高性能的方法有哪些？

最新推荐文章于 2024-12-13 20:36:54 发布

原创最新推荐文章于 2024-12-13 20:36:54 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

css面试题专栏收录该内容

7 篇文章

订阅专栏

本文探讨了CSS优化的一些关键方法，包括避免过度约束，使用简洁代码，减少后代选择符的使用，避免不必要的命名空间，消除重复代码，以及合理使用CSS语法来提高性能。建议采用描述性语义的类名，并尽量避免使用`!important`，以实现更高效的CSS维护和性能。

CSS优化、提高性能的方法有哪些？

避免过度约束

过渡约束的代码：

div{
      position:relative;
      bottom:100px; // 不必要的样式约束
      top:-200px;
      width: 200px;
      height: 200px;
      background-color:lightcoral;
  }

简洁的代码

 div{
    position:relative;
    top:-200px;
    width: 200px;
    height: 200px;
    background-color:lightcoral;
}

避免后代选择符

正常在开发中 HTML 和 CSS代码分开的。使用后代选择器CSS代码就会严重依附于HTML代码，当HTML代码结构结构发生变化时，CSS代码也得修改。这就会造成很麻烦的情况。
例如： 这就是很麻烦的代码
```
body div ul li {    
	...   
}
```
使用紧凑的语法
避免不必要的命名空间

避免不必要的重复

1、多余重复的代码

.box1{
     color:red;       
     font-size:15px;
}    
.box2{
     color:red;
     font-size:15px;
}

2、简洁的代码

.box1,.box2{
     color:red;
     font-size:15px;
}

最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则