前端代码规范篇

目录

html规范

代码缩进

HTML代码大小写

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

元素属性

CSS规范

代码格式化

代码大小写

选择器

代码易读性

属性书写顺序

js规范

命名规范

代码缩进

代码可读性

字符串

---

html规范

代码缩进

统一使用2个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

<div class="jdc">
  <a href="#"></a>
</div>

HTML代码大小写

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

推荐：
<div class="demo"></div>

不推荐：
<div class="DEMO"></div>	
<DIV CLASS="DEMO"></DIV>

元素属性

• 元素属性值使用双引号语法
• 元素属性值可以写上的都写上

推荐：
<input type="text">
<input type="radio" name="name" checked="checked" >

不推荐：
<input type=text>	
<input type='text'>	
<input type="radio" name="name" checked >

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：
<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>

不推荐：
<div>
    <h1></h1><p></p>
</div>	
<p> 
    <span></span>
    <span></span>
</p>

段落元素与标题元素只能嵌套内联元素

推荐：
<h1><span></span></h1>
<p><span></span><span></span></p>

不推荐：
<h1><div></div></h1>
<p><div></div><div></div></p>

CSS规范

代码格式化

推荐：
.jdc{
    display: block;
    width: 50px;
}

不推荐：
.jdc{ display: block;width: 50px;}

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，类名可用' - '隔开，属性字符串允许使用大小写。

/* 推荐 */
.jdc {
	display:block;
}
.jdc-html {
	display:block;
}
	
/* 不推荐 */
.JDC {
	DISPLAY:BLOCK;
}
.jdcHtml {
	DISPLAY:BLOCK;
}

选择器

• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

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

/* 不推荐 */
#jdc {}
.jdc div{}

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格，末尾加分号

推荐：
.jdc { 
    width: 100%; 
}

不推荐：
.jdc{ 
    width:100%;
}

逗号分隔的取值，逗号之后一个空格

推荐：
.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐：
.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

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

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

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

属性书写顺序

建议遵循以下顺序：

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

js规范

命名规范

• 标准变量、函数名采用小驼峰命名法，构造器、类用大驼峰
• ID 在变量名中全大写
• 常量全大写，用下划线连接；构造函数，大写第一个字

let thisIsMyName;
let goodID;
let reportURL;
let AndroidVersion;
let iOSVersion;
let MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
class User {
  constructor(options) {
    this.name = options.name;
  }
}

代码缩进

      使用 2 个空格作为缩进

代码可读性

        隔开函数签名，括号两边用空格隔开。

推荐
const x = function () {};
const y = function a() {};

不推荐
const f = function(){};
const g = function (){};
const h = function() {};

       使用空格把运算符隔开。

推荐
const newName = 'CKS';

不推荐
const newName='CKS';

        大括号内部加空格，圆括号和中括号内部不要空格。

推荐
const foo = { clark: 'kent' };
const foo = [1, 2, 3];
console.log(foo[0]);

不推荐
const foo = {clark: 'kent'};
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

 避免不必要的三元表达式语句。

推荐
const foo = a || b;
const bar = !!c;
const baz = !c;

不推荐
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

字符串

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

// bad
const department = "JDC"

// good
const department = 'JDC'

参考：语言规范 | Aotu.io - 前端代码规范