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，可以选择其他选择器

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