css编码规范_html/css_WEB-ITnose
1 命名
1.1 文件命名
常用的文件命名：
全局：global.css
结构：layout.css
模块：module.css
主题: teemes.css
较长文件名必须以 - 中横杠符连接，项目里面的私有样式文件：项目名-业务模块名称.css。
例:
/* 项目名为clout *//* good */clout-home.css/* bad */cloutHome.css;
1.2 选择器命名
（重要）在不是必须的情况下尽可能不用id选择器。
选择器名字全小写，不得使用大写。
较长选择器名字之间使用-中横杆连接。
当判断容易出现命名冲突的时候，命名需按规则：模块名-你的选择器名，如果出现多层级选择器的情况（应尽量避免超过3级的情况），每个层级间使用-中横杆连接，不建议直接使用嵌套。
例：
/* 选择器名称 *//* good */.mydialog { font-size: .28rem;} /* bad */.myDialog { font-size: .28rem;}/* 模块及嵌套 *//* good */ 标题
.mydialog-hd-title { color: #3f3f3f;}/* bad */ 标题
.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
2 代码风格
2.1 缩进
（重要）统一使用 4 个空格缩进，不得使用 tab 和 2 个空格（没规范前的缩进方式不管）。
sublime -> tab键转空格
eclipse、sts -> tab键转空格
2.2 空格
（重要）选择器跟 { 之间必须包含空格。
例：
/* 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;}...... 2.3 换行
（重要）一个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)) )} 2.4 行长度
（重要） 每行不得超过 120 个字符，除非单行不可分割（例如url超长）。
3 值与单位
3.1 文本
（重要）文本内容必须用双引号包围。
例：
/* good */body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}/* bad */body { font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;} 3.2 数值
（重要）数值为 0 - 1 之间的小数，省略整数部分的 0 。
例：
/* good */body { font-size: .28rem;}/* bad */ { font-size: 0.28rem;} 3.3 单位
（重要）数值为 0 的属性值须省略单位。
例：
/* good */body { padding: 0 .1rem;}/* bad */body { padding: 0rem .1rem;} 3.4 url()
（重要） 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);} 3.5 颜色
（重要）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;} 4 通用
4.1 选择器
（重要）DOM节点 id、class 属性赋值时 = 之间不得有空格，属性值必须用双引号包围，不得用单引号。
例：
/* good *//* bad */
（重要）如无必要，尽量不使用 id 选择器，给 id、class 选择器设置属性时不需要添加类型选择器进行限定。
例：
/* good */#footer,.container { background-color: #fff;}/* bad */div#footer,div.container { background-color: #fff;} （重要） id 选择器不需嵌套其他选择器。
例：
/* good */#tips { color: #bdbdbd;}/* bad */.footer #tips { color: #bdbdbd;}
4.2 属性缩写
（建议）在可以使用缩写的情况下，尽量使用属性缩写。
例：
/* good */body { font: .28rem/1.25 Helvetica;}/* bad */body { font-family: Helvetica; font-size: .28rem; line-height: 1.25;} （建议）使用 border、margin、padding 等缩写时，应注意确实需要设置多个方向的值时才使用缩写，避免其他方向的有用值被覆盖掉
例：
.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;} 4.3 属性书写顺序
（建议）按如下顺序书写，摘自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;} 4.4 变换与动画
（重要） 使用 transition 时应指定 transiton-property，不用 all。
例：
/* good */.tab { transition: color 1s, background-color: 1s;}/* bad */.tab { transition: all 1s;} 4.5 属性前缀
（建议）属性的私有前缀按长到短排列，按 : 对其
例：
/* 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;}