css性能杀手 |js css 文件压缩合并

以下是一些常见的CSS性能杀手：

/* 1.使用全局选择器 */
* { margin: 0; padding: 0; }
/* 2.使用后代选择器 */
nav ul li { ... }
/* 3.使用不必要的样式 */
body { font-family: Arial, sans-serif; }
/* 4.使用大量的样式表 *//* 5.使用复杂的选择器 */
.header nav ul li a:hover { ... }
/* 6.使用!important */
h1 { color: red !important; }
/* 7.使用 @import */
@import url(style.css);
/* 8.使用过多的CSS注释 */
/* 这是一个注释 */
/* 9.使用过多的CSS hack */
/* IE hack */
.header { margin-top: 20px\9; }
/* 10.使用多余的CSS图片 */
background-image: url(bg.png);

这些CSS性能杀手都可能引起页面性能问题。但是，要注意，并不是所有的CSS写法都会导致性能问题。有些CSS技巧可以提高页面性能，例如：

/* 1.使用ID选择器 */
#header { ... }
/* 2.使用类选择器 */
.header { ... }
/* 3.使用和标签名一起的类选择器 */
div.header { ... }
/* 4.使用简单选择器 */
a { ... }
/* 5.使用有效的样式表 *//* 6.缩小选择器范围 */
.header ul li a { ... } ->.header a { ... }
/* 7.使用角度度量颜色 */
color: hsl(240, 100%, 50%);
/* 8.避免使用!important */
h1 { color: red; }
/* 9.避免使用 @import *//* 10.使用CSS sprite */
.logo { background-position: -50px 0; }

总的来说，优秀的CSS设计需要考虑页面性能。避免使用CSS性能杀手，合理地使用CSS设计技巧，以提高页面性能。