你必须知道的前端规范

xjj前端妹_雅

发布于 2022-5-30 17:19

浏览

0收藏

HTML

1.HTML规范

1.1 元素及标签闭合

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：
1.

1）所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
2）空元素标签都不加 “/” 字符。
推荐：

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
	
<br>
1.
2.
3.
4.
5.
6.

不推荐：

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>

<br/>
1.
2.
3.
4.
5.
6.

1.2 代码大小写

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

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

不推荐：

<div class="DEMO"></div>
	
<DIV CLASS="DEMO"></DIV>
1.
2.
3.

HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合<br/>

<!-- 优先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- HTML文本内容 -->
<h1>I AM WHAT I AM </h1>

<!-- JavaScript 内容 -->
<script type="text/javascript">
	var demoName = 'demoName';
	...
</script>
	
<!-- CDATA 内容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

1.3 类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含<br />
推荐：

<link rel="stylesheet" href="" >
<script src=""></script>
1.
2.

不推荐：

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
1.
2.

1.4 元素属性

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

推荐：

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

不推荐：

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

1.5 特殊字符引用

文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。

在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

推荐：

<a href="#">more&gt;&gt;</a>
1.

不推荐：

<a href="#">more>></a>
1.

1.6 纯数字输入框

使用 type=“tel” 而不是 type=“number”

<input type="tel">
1.

1.7 代码嵌套

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

推荐：

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>
1.
2.
3.
4.
5.

不推荐：

<div>
    <h1></h1><p></p>
</div>	
<p> 
    <span></span>
    <span></span>
</p>
1.
2.
3.
4.
5.
6.
7.

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

推荐：

<h1><span></span></h1>
<p><span></span><span></span></p>
1.
2.

不推荐：

<h1><div></div></h1>
<p><div></div><div></div></p>
1.
2.

2. HTML注释

2.1 单行注释

一般用于简单的描述，如某些状态描述、属性描述等

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

推荐：

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

不推荐：

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>
1.
2.
3.
4.
5.

2.2 模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符， 表示模块开始， 表示模块结束，模块与模块之间相隔一行

推荐写法：

<!-- 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.

不推荐写法：

<!-- 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.

2.3 嵌套模块注释

当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用

<!-- S Comment Text -->
<!-- E Comment Text -->
1.
2.

而改用

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

注释写在模块结尾标签底部，单独一行。

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

CSS

1.CSS规范

1.1 规范约定

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写
考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM
推荐：

@charset "UTF-8";

.jdc{}
1.
2.
3.

不推荐：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";

.jdc{}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

@CHARSET "UTF-8";
/* @charset规则没有用小写 */

.jdc{}
1.
2.
3.
4.

/* 无@charset规则 */
.jdc{}
1.
2.

1.2 代码格式化

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

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

一种是展开格式（Expanded）

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

统一使用展开格式书写样式

1.3 代码大小写

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

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

1.4 选择器

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

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

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

1.5 代码缩进

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

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

1.6 分号

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

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

1.7 代码易读性

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

推荐：

.jdc { 
    width: 100%; 
}

1.
2.
3.
4.

不推荐：

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

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

推荐：

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

不推荐：

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

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

推荐：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}
1.
2.
3.
4.
5.
6.
7.
8.

不推荐：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}
1.
2.
3.
4.
5.

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

推荐：

.jdc {
    color: rgba(255,255,255,.5);
}
1.
2.
3.

不推荐：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}
1.
2.
3.

属性值十六进制数值能用简写的尽量用简写

推荐：

.jdc {
    color: #fff;
}
1.
2.
3.

不推荐：

.jdc {
    color: #ffffff;
}
1.
2.
3.

不要为 0 指明单位

推荐：

.jdc {
    margin: 0 10px;
}
1.
2.
3.

不推荐：

.jdc {
    margin: 0px 10px;
}
1.
2.
3.

1.8 属性值引号

css属性值需要用到引号时，统一使用单引号

/* 推荐 */
.jdc { 
	font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc { 
	font-family: "Hiragino Sans GB";
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

1.9 属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（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.

1.10 CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.jdc {
    -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.

2.CSS注释

2.1 单行注释

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

推荐：

/* Comment Text */
.jdc{}

/* Comment Text */
.jdc{}
1.
2.
3.
4.
5.

不推荐：

/*Comment Text*/
.jdc{
	display: block;
}
.jdc{
	display: block;/*Comment Text*/
}
1.
2.
3.
4.
5.
6.
7.

2.2 模块注释

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

推荐：

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


/* Module B
---------------------------------------------------------------- */
.mod_b {}
1.
2.
3.
4.
5.
6.
7.
8.

不推荐：

/* Module A ---------------------------------------------------- */
.mod_a {}
/* Module B ---------------------------------------------------- */
.mod_b {}
1.
2.
3.
4.

2.3 文件信息注释

在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
1.
2.
3.
4.
5.
6.

原文传送带京东凹凸实验室前端代码规范

分类

标签

已于2022-5-30 17:20:21修改

2条回复

按时间正序

按时间倒序

xjj_snntH

以后尽量按照规范来

2022-5-30 17:49:39

xjj前端妹_雅回复了 xjj_snntH

以后尽量按照规范来

nice

2022-5-30 17:53:19

51CTO

51CTO博客

51CTO学堂

你必须知道的前端规范

HTML

1.HTML规范

1.1 元素及标签闭合

1.2 代码大小写

1.3 类型属性

1.4 元素属性

1.5 特殊字符引用

1.6 纯数字输入框

1.7 代码嵌套

2. HTML注释

2.1 单行注释

2.2 模块注释

2.3 嵌套模块注释

CSS

1.CSS规范

1.1 规范约定

1.2 代码格式化

1.3 代码大小写

1.4 选择器

1.5 代码缩进

1.6 分号

1.7 代码易读性

1.8 属性值引号

1.9 属性书写顺序

1.10 CSS3浏览器私有前缀写法

2.CSS注释

2.1 单行注释

2.2 模块注释

2.3 文件信息注释

目录

订阅鸿蒙技术特刊，精选内容抢先看