CSS代码的优化方法举例说明


摘要:
下文讲述函数中return语句的功能简介说明,如下所示:

css 作为html样式编写的必备脚本,在互联网项目中必不可少,那么我们该如何编写高性能的css代码呢?下文将一一道来,如下所示:

1.css代码分析

#container > a{
  color: blue;
  font-size: 18px;
}
以上css代码解析注意事项:
   css解析是从右到左
  1.找出所有<a>标签的元素
  2.找到a标签的父级中id 等于"container"的html元素 
  3.将匹配出的超链接元素的字体设置为blue 大小设置为18px;


css代码性能说明

css选择器采用不同的写法,会导致浏览器解析所消耗的能量不同,如:

 
 #container *{
  color: blue;
  font-size: 18px;
}

上述代码,在大型页面中是不可取的写法,因为需匹配的元素非常非常多,这将会加大系统的开销,
因为根据右侧匹配规则,”*”将会匹配所有元素,
所以最右侧匹配器,我们尽量采用最小化原则

1.ID选择器
2.类选择器
3.元素选择器
4.兄弟选择器
5.子选择器
6.后代选择器
7.属性选择器
8.伪类/伪元素选择器
上述匹配器规则的性能由高至低


css代码性能优化指导

1.尽量避免使用”*”通配符
2.合理使用id选择器
因为id选择器性能最好,但是其样式只能应用到一个元素上,会使代码体积变大,尽量使用”类选择器”class
3.避免使用限定标签之”类和id写法”
例:应避免以下写法

     div#className {}
     div.idName {}  
  

4.减少后代选择器使用
例:

      #container > a{ } 
    

5.多使用继承

      #className {} 
      #className > .span { font-size:24px; } 
      #className > .a { font-size:24px; }