css编码规范_html/css_WEB-ITnose

* 约定： 以下事例代码中所用单位均为 rem ，关于 rem 单位的使用可参照 《移动端web app自适应布局探索与总结》

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

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

4.2 属性缩写

（建议）在可以使用缩写的情况下，尽量使用属性缩写。

例：

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

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;}