界面及CSS规范

梳理

一、 界面标签规范

1.1 标签名、类名、标签属性和大部分属性值统一用小写

<div class="demo"></div>

1.2 元素属性

元素属性值使用双引号语法，如上

1.3 缩进

统一使用4个空格进行代码缩进

1.4 标签嵌套

• 元素嵌套，块元素独立占行，内联元素可选

<div>
    <h1></h1>
    <p></p>
</div>
<p><span></span></p>

• p标签和h标签内只能嵌套内联元素

<!-- 不推荐 -->
<p>
    <div></div>
</p>

二、CSS规范

2.1 基本风格

使用展开格式，不使用紧凑格式

/* 推荐 */
.daddy-lab {
    display: block;
    width: 50px;
}
/* 不推荐 */
.daddy-lab { display: block;width: 50px; }

2.2 大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大写（比如颜色字符串）。

/* 推荐 */
.daddy-lab {
    display: block;
}
/* 不推荐 */
.DADDY-LAB {
    DISPLAY: BLOCK;
}

2.3 选择器

• 尽量少用通用选择器*
• 尽量不使用 ID选择器

/* 推荐 */
.daddy-lab {}
.daddy-lab li {}
/* 不推荐 */
* {}
#daddy-lab {}

2.4 缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致

.daddy-lab {
    width: 100%;
    height: 100%;
}

2.5 分号

每个属性声明末尾都要加分号;

2.6 空格

• 左括号与类名之间一个空格，冒号与属性值之间一个空格，逗号之后一个空格

/* 推荐 */
.daddy-lab {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
.daddy-lab, .daddy-lab_logo, .daddy-lab_hd {
    color: #ff0;
}
/* 不推荐 */
.daddy-lab{
    box-shadow:1px 1px 1px #333,2px 2px 2px #ccc;
}
.daddy-lab,.daddy-lab_logo,.daddy-lab_hd{
    color:#ff0;
}

• 注释内容与/*和*/之间各有一个空格

推荐
/* Comment Text */
不推荐
/*Comment Text*/

• 颜色值 rgb() rgba() hsl() hsla() rect() 中没有空格， 且取值不要带有不必要的0

/* 推荐 */
.daddy-lab {
    color: rgba(255,255,255,.5);
}
/* 不推荐 */
.daddy-lab {
    color: rgba(255, 255, 255, 0.5);
}

2.7 引号

css属性值的引号，统一使用单引号

/* 推荐 */
.daddy-lab { 
    font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.daddy-lab { 
    font-family: "Hiragino Sans GB";
}

2.8 其他

0后面不带单位

/* 推荐 */
.daddy-lab {
    margin: 0 10px;
}
/* 不推荐 */
.daddy-lab {
    margin: 0px 10px;
}

2.9 注释

注释前后需换行
推荐：

/* Comment Text */
.daddy-lab {}

不推荐：

.daddy-lab {
    display: block;/* Comment Text */
}