class命名
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，
.btn代表button,但是.s不能表达任何意思;
class名应该尽可能短,并且意义明确;
选择器、属性和值都使用小写
在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。
单行写完一个选择器定义
便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。
如果有嵌套定义，可以采取内部单行的形式。
/* 单行定义一个选择器 */
.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}
/* 这是一个有嵌套定义的选择器 */
@media all and (max-width:600px){
.m-class1 .itm{height:17px;line-height:17px;font-size:12px;}
.m-class2 .itm{width:100px;overflow:hidden;}
}
@-webkit-keyframes showitm{
0%{height:0;opacity:0;}
100%{height:100px;opacity:1;}
}最后一个值也以分号结尾
通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。
CSS书写规范使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
省略值为0时的单位
16进制颜色代码缩写
去掉小数点前的“0”
为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。
.m-box{margin:0 10px;background-position:50% 0;}使用单引号
省略url引用中的引号，其他需要引号的地方使用单引号。
.m-box{background:url(bg.png);}
.m-box:after{content:'.';}使用16进制表示颜色值
除非你需要透明度而使用rgba，否则都使用#f0f0f0这样的表示方法，并尽量缩写。
.m-box{color:#f00;background:rgba(0,0,0,0.5);}根据属性的重要性按顺序书写(CSS书写顺序)
只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。
1.位置属性(display,visibility,position, top, right, z-index, float等)
2.大小(width, height, line-height,margin,padding,border,overflow, min-width )
3.文字系列(font, letter-spacing, text-align,color等)
4.背景(background, 等)
5.其他(animation, transition等)
如果属性间存在关联性，则不要隔开写。
/* 这里的height和line-height有关联性 */
.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}私有在前，标准在后
先写带有浏览器私有标志的，后写W3C标准的。
.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}注释格式：
/* 注释文字 */
对选择器的注释统一写在被注释对象的上一行，对属性及值的注释写于分号后。
/* Header */
内容区
/* End Header */