css面试题（7）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，可以选择其他选择器

• 尽可能的精简规则，你可以合并不同类里的重复规则