css编码规范

时间 2019-11-09

标签 css 编码规范栏目 CSS 繁體版

原文原文链接

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

1 命名

1.1 文件命名

经常使用的文件命名：html

全局：global.cssweb
结构：layout.csssegmentfault
模块：module.csssublime-text
主题：themes.cssapp

较长文件名必须以 - 中横杠符链接，项目里面的私有样式文件：项目名-业务模块名称.css。eclipse

例:移动端web

/* 项目名为clout */

/* good */
clout-home.css

/* bad */
cloutHome.css;

1.2 选择器命名

（重要）在不是必须的状况下尽量不用id选择器。ide

选择器名字全小写，不得使用大写。函数
较长选择器名字之间使用-中横杆链接。
当判断容易出现命名冲突的时候，命名需按规则：模块名-你的选择器名，若是出现多层级选择器的状况（应尽可能避免超过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 个空格（没规范前的缩进方式无论）。

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 选择器不需嵌套其余选择器。

例：

<div class="footer">
    <span id="tips">提示语</span>
</div>

/* 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 等缩写时，应注意确实须要设置多个方向的值时才使用缩写，避免其余方向的有用值被覆盖掉

例：

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