首頁 >web前端 >html教學 >css编码规范_html/css_WEB-ITnose

css编码规范_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:33:431240瀏覽

* 约定: 以下事例代码中所用单位均为 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;}
    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn