* 约定: 以下事例代码中所用单位均为 rem ,关于 rem 单位的使用可参照 《移动端web app自适应布局探索与总结》
常用的文件命名:
全局:global.css
结构:layout.css
模块:module.css
主题: teemes.css
较长文件名必须以 - 中横杠符连接,项目里面的私有样式文件:项目名-业务模块名称.css。
例:
/* 项目名为clout *//* good */clout-home.css/* bad */cloutHome.css;
(重要)在不是必须的情况下尽可能不用id选择器。
选择器名字全小写,不得使用大写。
较长选择器名字之间使用-中横杆连接。
当判断容易出现命名冲突的时候,命名需按规则:模块名-你的选择器名,如果出现多层级选择器的情况(应尽量避免超过3级的情况),每个层级间使用-中横杆连接,不建议直接使用嵌套。
例:
/* 选择器名称 *//* good */.mydialog { font-size: .28rem;} /* bad */.myDialog { font-size: .28rem;}/* 模块及嵌套 *//* good */<div class="mydialog"> <div class="mydialog-hd"> <p class="mydialog-hd-title">标题</p> </div></div>.mydialog-hd-title { color: #3f3f3f;}/* bad */<div class="mydialog"> <div class="hd"> <p class="title">标题</p> </div></div>.mydialog .hd .title { color: #3f3f3f;}
(建议)常用的选择器命名:
头部:header(hd)
标题:title
内容:container/content(cont)
页面主题:body(bd)/main
尾部:footer(ft)
导航:nav
子导航:subnav
标签页:tab
侧栏:sidebar
栏目:column/col
外围控制布局:wrapper
左中右:left center right
菜单:menu
子菜单:submenu
列表:list
当前的:active
图标:icon
提示信息:msg
小技巧:tips
(重要)统一使用 4 个空格缩进,不得使用 tab 和 2 个空格(没规范前的缩进方式不管)。
sublime -> tab键转空格
eclipse、sts -> tab键转空格
(重要)选择器跟 { 之间必须包含空格。
例:
/* good */.selector {}/* bad */ .selector{}
(重要)属性跟 : 之间不能有空格,: 跟属性值之间必须包含空格。
例:
/* good */.selector { color: #3f3f3f;}/* bad */.selector { color:#3f3f3f; /* 或 color : #3f3f3f; */}
(重要) >、+、~选择器的两边各保留一个空格。
例:
/* good */.header > .title { padding: .1rem;}label + input { margin-left: .04rem;}input:checked ~ .input-face { background-color: #ccc;}/* bad */.header>.title { padding: .1rem;}......
(重要)一个rule中有多个选择器时,选择器间必须换行。
例:
/* good */p,div,input,textarea { font-size: .28rem;}/* bad */p, div, input, textarea { font-size: .28rem;}
(重要)属性值之间必须换行。
例:
/* good */.content { padding: .1rem; color: #3f3f3f;}/* bad */.content { padding: .1rem; color: #3f3f3f;}
(建议)对于超长的样式属性值,可在 空格 或 , 处换行。
例:
.selector { bakcground: url(veryveryveryveryveryLongUrlHere/image/icon.png) no-repeat 0 0;}.selector { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, rgb(88,94,124)), color-stop(0.52, rgb(115,123,162)) )}
(重要) 每行不得超过 120 个字符,除非单行不可分割(例如url超长)。
(重要)文本内容必须用双引号包围。
例:
/* good */body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}/* bad */body { font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;}
(重要)数值为 0 - 1 之间的小数,省略整数部分的 0 。
例:
/* good */body { font-size: .28rem;}/* bad */ { font-size: 0.28rem;}
(重要)数值为 0 的属性值须省略单位。
例:
/* good */body { padding: 0 .1rem;}/* bad */body { padding: 0rem .1rem;}
(重要) url() 函数中的路径不加引号
例:
/* good */body { background: url(bg.png);}/* bad */body { background: url("bg.png");}
(建议) url() 函数中的绝对路径可省去协议名
例:
/* good */body { background: url(//yunzhijia.com/images/bg.png);}/* bad */body { background: url(http://yunzhijia.com/images/bg.png);}
(重要)RGB颜色值必须使用十六进制形式 #3f3f3f。不允许使用 rgb()。
解释:
带有alpha(不透明度)的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后须保留一个空格。
例:
/* good */.border { border: 1px solid #dce1e8;}.overlayer { background-color: rgba(0, 0, 0, .7); }/* bad */.border { border: 1px solid rgb(220, 225, 232);}.overlayer { background-color: rgba(0,0,0,.7);}
(重要)颜色值可缩写时,须使用缩写形式。
例:
/* good */.text-grey { color: #ccc;}/* bad */.text-grey { color: #cccccc;}
(重要)颜色值不可使用颜色单词。
例:
/* good */.text-red { color: #f00;}/* bad */.text-red { color: red;}
(建议)颜色值中的英文字母使用小写,如果采用大写字母,则必须保证同一项目内是一致的。
例:
/* good */.border-color { border-color: #dce1e8;}/* bad */.border-color { border-color: #DCE1E8;}
(重要)DOM节点 id、class 属性赋值时 = 之间不得有空格,属性值必须用双引号包围,不得用单引号。
例:
/* good */<div class="container" id="container"></div>/* bad */<div class = "container" id='container'></div>
(重要)如无必要,尽量不使用 id 选择器,给 id、class 选择器设置属性时不需要添加类型选择器进行限定。
例:
/* good */#footer,.container { background-color: #fff;}/* bad */div#footer,div.container { background-color: #fff;}
(重要) id 选择器不需嵌套其他选择器。
例:
/* good */<div class="footer"> <span id="tips">提示语</span></div>#tips { color: #bdbdbd;}/* bad */.footer #tips { color: #bdbdbd;}
(建议)在可以使用缩写的情况下,尽量使用属性缩写。
例:
/* good */body { font: .28rem/1.25 Helvetica;}/* bad */body { font-family: Helvetica; font-size: .28rem; line-height: 1.25;}
(建议)使用 border、margin、padding 等缩写时,应注意确实需要设置多个方向的值时才使用缩写,避免其他方向的有用值被覆盖掉
例:
<div class="wrap list-wrap"></div>.wrap { padding: .1rem; border: 1px solid #dce1e8;}/* good */.list-wrap { padding-left: .2rem; padding-right: .2rem; border-color: #ccc;}/* bad */.list-wrap { padding: .2rem .1rem; border: 1px solid #ccc;}
(建议)按如下顺序书写,摘自http://www.zhihu.com/question/19586885/answer/48933504
位置属性(position, top, right, z-index,display, float, overflow 等)
大小(width, height, padding, margin, border)
文字系列(font, line-height, letter-spacing,color- text-align等)
视觉(background, color, list-style等)
其他(animation, transition等)
例:
.footer-fixed { position: fixed; bottom: 0; left: 0; overflow: hidden; width: 100%; height: .5rem; padding: .1rem; border: 1px solid #dce1e8; box-sizing: border-box; font-size: .28rem; line-height: 1.25; background: #e9ecf1; color: #3f3f3f; -webkit-transition: color .5s; -moz-transition: color .5s; transition: color .5s;}
(重要) 使用 transition 时应指定 transiton-property,不用 all。
例:
/* good */.tab { transition: color 1s, background-color: 1s;}/* bad */.tab { transition: all 1s;}
(建议)属性的私有前缀按长到短排列,按 : 对其
例:
/* good */.tab { -webkit-transition: color .5s; -moz-transition: color .5s; transition: color .5s;}/* bad */.tab { -webkit-transition: color .5s; -moz-transition: color .5s; transition: color .5s;}