一、使用高效的css选择器

.reader p.list div{
    //省去代码
}

我们看css选择器是从左边到右边看的，实际上css解析的时候是从右边到左边解析的:

  • 1、css引擎是先查找页面中全部的div;
  • 2、找到了div继续查找该元素是否具有list的类的父元素;
  • 3、找到了含有list类的父元素过滤父元素是p的元素;
  • 4、继续查找父元素是否具有reader的类的父元素;

使用高效的css选择器要遵守下列几个原则

  • 1、避免使用通配选择器
  • 2、避免使用标签选择器及单个属性选择器作为关键选择器(关键选择器是最右边的那个选择器)
  • 3、不要在ID前面加标签名
  • 4、劲量不要在选择器中定义过多的层级,最好不要超过三层

二、css对图片的处理

  • 1、不要设置图片的尺寸,开发过程中可能缩略图和实际图使用同一张图通过改变大小去显示,这样造成不良后果是原本可以下载一个小图，现在要下载大图
  • 2、使用css sprite将小图合并到一张大图上

三、减少css的代码量

  • 1、定义简洁的css规则

  • 2、合并相关的css规则

    .reader-title{
    font:italic bold 12px/30px serif;
}
    • 类似的样式还有background,border,margin,padding,text,list-style,transform,transition,animation

  • 3、定义简洁的属性值

    /*不推荐使用*/
p.reader-title{
    color: #ff33ff;
    font-size: 0.8rem;
    padding: 0px;
}
/*推荐使用*/
p.reader-title{
    color: #f3f;
    font-size: .8rem;
    padding: 0;
}

  • 4、合并相同的定义

    • 把相同的样式合并到一起
    • 在css中有些属性是可以继承的,比如color,font,line-height,list-style,text-align,text-indent,text-transform
    • 删除无效的样式

  • 5、其它css高性能实战

    • 避免使用@import
    • 避免使用IE浏览器独有的样式:图片滤镜和css表达式