css的优化方案

在遵循上述标准的基础上，进一步的优化css方案，以加快网站的渲染速度

避免耗性能的属性

以下所举列的属性可能造成渲染性能问题。

/* expression */
.class{width:expression(this.width>100?'100px':'auto');}
/* filter */
.class{filter:alpha(opacity=50);}

选择器合并

即CSS选择器组合，可以一次定义多个选择器，为你节省很多字节和宝贵时间。
通常我们会将定义相同的或者有大部分属性值相同（确实是因为相关而相同）的一系列选择器组合到一起（采用逗号的方法）来统一定义。

/* 以下对布局类选择器统一做了清除浮动的操作 */
.g-hd:after,.g-bd:after,.g-ft:after{display:block;visibility:hidden;clear:both;height:0;content:".";}
.g-hd,.g-bd,.g-ft{zoom:1;}
/* 通常background总是会占用很多字节，所以一般情况下，我们都会这样统一调用 */
.m-logo,.m-help,.m-list li,.u-tab li,.u-tab li a{background:url(../images/sprite.png) no-repeat 9999px 9999px;}
.m-logo{background-position:0 0;}
/* 以下是某个元件的写法，因为确实很多元素是联动的或相关的，所以采用了组合写法，可以方便理解和修改 */
.u-tab li,.u-tab li a{display:inline;float:left;height:30px;line-height:30px;}
.u-tab li{margin:0 3px;}
.u-tab li a{padding:0 6px;}

背景图优化合并

图片本身的优化：

• 图像质量要求和图像文件大小决定你用什么格式的图片，用较小的图片文件呈现较好的图像质量。
• 当图片色彩过于丰富且无透明要求时，建议采用jpg格式并保存为较高质量。
• 当图片色彩过于丰富又有透明或半透明要求或阴影效果时，建议采用png24格式，并对IE6进行png8退化（或在不得已情况下使用滤镜）。
• 当图片色彩不太丰富时无论有无透明要求，请采用png8格式，大多数情况下建议采用这种格式。
• 当图片有动画时，只能使用gif格式。
• 你可以使用工具对图片进行再次压缩，但前提是不会影响色彩和透明。

  多张图片的合并(采用雪碧图)：

• 单个图标之间必须保留空隙，空隙大小由容器大小及显示方式决定。这样做的好处是既考虑了“容错性”又提高了图片的可维护性。
• 图标的排列方式，也由容器大小及显示方式决定。排列方式分为以下几种：横向排列（容器宽度有限）、纵向排列（容器高度有限）、斜线排列（容器宽高不限），靠左排列（容器背景居左）、靠右排列（容器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。
• 合并后图片大小不宜超过50K，建议大小在20K-50K之间。
• 为保证多次修改后的图片质量，请保留一份PSD原始图，修改和添加都在PSD中进行，最后导出png。

  分类合并：

  并不是把所有的图标都合并在一张图片里就是最好的，除了要控制图片大小之外还要注意以下方法。
• 按照图片排列方式，把排列方式一样的图片进行合并，便于样式控制。 按照模块或元件，把同属于一个模块或元件的图片进行合并，方便模块或元件的维护。
• 按照图片大小，把大小一致或差不多的图片进行合并，可充分利用图片空间。
• 按照图片色彩，把色彩一致或差不多的图片进行合并，保证合并后图片的色彩不过于丰富，可防止色彩失真。

文件压缩

合理的书写CSS能很大程度上减少文件大小，完成后，在不损坏文件内容的情况下，想尽一切办法压缩你的CSS，你可以借助压缩工具把注释和多余的空格、换行去掉。
(工具可以用后面介绍的打包工具或atom编辑器插件提供的功能)

语义化的命名方式

布局（.g-）

模块（.m-）、元件（.u-）

功能（.f-）

皮肤（.s-）

状态（.z-）

不要使用 @import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

• 使用多个<link>元素
• 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
• 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

.element { ... }
.element.avatar { ... }
.element.selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element.avatar { ... }
  .element.selected { ... }
}