欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css编码规范_html/css_WEB-ITnose

程序员文章站 2022-04-30 17:44:18
...
* 约定: 以下事例代码中所用单位均为 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 */

标题

.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;}
    相关标签: css编码规范