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 */