基于凹凸实验室的个人前端项目规范！（值得一看）

HTML部分

1. HTML代码大小写

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

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

2. 元素属性

• 元素属性值使用双引号语法

<input type="text">
	
<input type="radio" name="name" checked="checked" >
1
2
3

3. 注释部分

• 单行注释 ：一般用于简单的描述，如某些状态描述、属性描述等。注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

<!-- Comment Text -->
<div>...</div>
1
2

• 模块注释：一般用于描述模块的名称以及模块开始与结束的位置。注释内容前后各一个空格字符，S 表示模块开始，E 表示模块结束，模块与模块之间相隔一行。

<!-- S Comment Text A -->	
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
	
<!-- S Comment Text B -->	
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->
1
2
3
4
5
6
7
8
9
10
11

CSS部分

1. 代码风格（个人推荐使用展开格式书写样式）

• 样式书写一般有两种：一种是紧凑格式 (Compact)

.jdc{ display: block;width: 50px;}
1

• 一种是展开格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}
1
2
3
4

2. 代码大小写

• 样式选择器，属性名，属性值关键字全部使用小写字母书写

/* 推荐 */
.jdc{
	display:block;
}
	
/* 不推荐 */
.JDC{
	DISPLAY:BLOCK;
}
1
2
3
4
5
6
7
8
9

3. 选择器

• 尽量少用通用选择器 *
• 非必要不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}
1
2
3
4
5
6
7
8
9

4. 代码易读性及分号

• 左括号与类名之间一个空格，冒号与属性值之间一个空格
• 每个属性声明末尾都要加分号；

.jdc {
    width: 100%;
    height: 100%;
}
1
2
3
4

• 为单个css选择器或新申明开启新行

//推荐
.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

//不推荐
.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5. 颜色值（ 统一使用RGBA() ）格式

• 颜色值中不需有空格，且取值不要带有不必要的 0

//推荐
.jdc {
    color: rgba(255,255,255,.5);
}

//不推荐
.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}
1
2
3
4
5
6
7
8
9

6. 单位值

• 不要为 0 指明单位

//推荐
.jdc {
    margin: 0 10px;
}

//不推荐
.jdc {
    margin: 0px 10px;
}
1
2
3
4
5
6
7
8
9

7. 属性书写顺序

• 遵循以下顺序
• 1、布局定位属性：display / position / float / clear / visibility / overflow
• 2、自身属性：width / height / margin / padding / border / background
• 3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
• 4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8. 注释部分

• 单行注释：注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

/* 推荐 */
/* Comment Text */
.jdc{}

/* Comment Text */
.jdc{}

/* 不推荐 */
/*Comment Text*/
.jdc{
	display: block;
}
.jdc{
	display: block;/*Comment Text*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 模块注释：注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行。

/* 推荐 */
/* Module A
---------------------------------------------------------------- */
.mod_a {}


/* Module B
---------------------------------------------------------------- */
.mod_b {}

/* 不推荐 */
/* Module A ---------------------------------------------------- */
.mod_a {}
/* Module B ---------------------------------------------------- */
.mod_b {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

9. 嵌套规范

• 选择器嵌套

/* CSS */
.jdc {}
.jdc_cover {}
.jdc_info {}
.jdc_info_name {}

/* SCSS */
.jdc {
    &_cover {}
    &_info {
        &_name {}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• 属性嵌套

/* CSS */
.jdc {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(/img/icon.png);
    background-position: 0 0;
}

/* SCSS */
.jdc {
    background: {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

命名部分

1. 图片命名（全小写字母，统一用下划线作为连接符号 如：btn_hot）

• 建议以以下顺序命名：图片业务（可选） + 图片功能类别（必选）+ 图片模块名称（可选）
• 图片业务（可选）：
  • PP_：拍拍
  • wx_：微信
  • jd_：京东商城
• 图片功能类别：
  • mod_：是否公共，可选
  • icon：模块类固化的图标
  • logo：LOGO类
  • btn：按钮
  • bg：可平铺或者大背景
• 图片模块名称：（此部分可采用小驼峰式命名）
  • goodsList：商品列表
  • goodsInfo：商品信息

2. ClassName命名：

• ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用减号符 “ - ” 连接。
• 当子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀。

<div class="modulename">
	<div class="modulename-cover"></div>
	<div class="modulename-info"></div>
</div>
1
2
3
4

• 当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块。

<div class="modulename">
	<div class="modulename-cover"></div>
	<div class="modulename-info">
    	<div class="modulename-info-user">
    		<div class="modulename-info-user-img">
    			<img src="" alt="">
    			<!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
    			<div class="miui-tit"></div>
    			<div class="miui-txt"></div>
    			...
    		</div>
    	</div>
    	<div class="modulename-info-list"></div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 常用命名推荐

3. JavaScript 变量命名（推荐使用小驼峰式命名）

• 当命名变量时，主流分为驼峰式命名（constiableName，ConsiableName）和下划线命名（constiable_name）两大阵营。

JavaScript 规范：

• 请记得 const 和 let 都是块级作用域，var 是函数级作用域

• 对所有引用都使用 const，不要使用 var（原因：这样做可以确保你无法重新分配引用，以避免出现错误和难以理解的代码）。

• 如果引用是可变动的，使用 let 代替 var（原因：let 是块级作用域的，而不像 var 属于函数级作用域）。

• 字符串统一使用单引号的形式 ’ '。

• 使用 === 和 !== 而非 == 和 !=

• 禁止链式赋值与链式创建对象

• 所有 v-for 循环必须设置key（key 必须设置成唯一性的值，无唯一性的值采用索引）

//不推荐
const a = b = c = 1
const a, b, c

//推荐
const a = 1
const b = 1
const c = 1
const a
const b
const c
1
2
3
4
5
6
7
8
9
10
11