属性顺序
1、定位、显示：position top float clear clip z-index display visibility list-style
2、盒模型：width min-width box-sizing padding margin overflow
3、字体、文本：font color line-height text-align letter-spacing
4、装饰：border outline background opacity cursor
5、效果：transition transform animation
简写数值、颜色值
1、font-size: .16rem; 省略小数点前的0
2、margin: 10px 0 0 10xp; 省略0的单位
3、color: #CCC; 省略颜色值相同的后3位
单行写完一个选择器定义
.g-header{width: 950px; height: 70px; background-color: #666;} 不超过3个以上
.g-header {
position: relative;
width: 950px;
height: 70px;
color: #FFF;
background-color: #666;
} 超过三个以上空行
使用单引号
.g-header{background: url(images/pic.jpg);} 省略url中的引号
.g-header:after{content: ‘.‘;} 需要引号的地方使用单引号
私有在前，标准在后
.m-box{
-webkit-box-shadow: 0 0 0 #000;
-moz-box-shadow: 0 0 0 #000;
box-shadow: 0 0 0 #000;
}
注释
/* * 块级注释 */ /* 单行注释 */
选择器顺序
1、从大到小(范围)
2、从低到高(基本、伪类)
3、从先到后(结构的先后)
4、从父到子(结构的嵌套)
选择器等级
1、行内样式
2、id
3、类
4、标签
5、伪类
style="" > #id .class > #id tag > #id > .class tag > .class > tag tag > tag
避免耗性能的属性
.class {*color: expression(this.parentNode.currentStyle.color);}
.class {width: expression(this.width>100?‘100px‘:‘auto‘);}
.class {filter: alpha(opacity=50);}
选择器合并
.g-header, .g-main, .g-footer {color: #FFF;}
图片优化
1、图片质量要求高且无透明，使用jpg
2、图片质量要求高且需要透明，使用png24
3、图片要求一般无论有无透明，使用png8
4、动画图片，使用gif或css3或svg或canvas
6、图标，做成字体文件或css3文件或svg文件
5、使用工具压缩图片
多图合并
多个小图标可以合并成一张图片，但合并后不超过50k
css使用
1、避免hack
2、css可以做到，不要使用js
3、写完css代码需要压缩最小文件
原文地址：https://www.cnblogs.com/yiku/p/8341044.html