你必须知道的前端规范

xjj前端妹_雅
发布于 2022-5-30 17:19
浏览
0收藏

HTML

1.HTML规范

1.1 元素及标签闭合

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

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

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

不推荐:

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

<br/>

1.2 代码大小写

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

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

不推荐:

<div class="DEMO"></div>
	
<DIV CLASS="DEMO"></DIV>

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.3 类型属性

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

<link rel="stylesheet" href="" >
<script src=""></script>

不推荐:

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

1.4 元素属性

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

推荐:

<input type="text">
	
<input type="radio" name="name" checked="checked" >

不推荐:

<input type=text>	
<input type='text'>
	
<input type="radio" name="name" checked >

1.5 特殊字符引用

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

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

推荐:

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

不推荐:

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

1.6 纯数字输入框

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

<input type="tel">

1.7 代码嵌套

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

推荐:

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

2. HTML注释

2.1 单行注释

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

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

推荐:

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

不推荐:

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

2.2 模块注释

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

注释内容前后各一个空格字符,<!-- S Comment Text --> 表示模块开始,<!-- E Comment Text --> 表示模块结束,模块与模块之间相隔一行

推荐写法:

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

不推荐写法:

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

2.3 嵌套模块注释

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

<!-- S Comment Text -->
<!-- E Comment Text -->

而改用

<!-- /Comment Text -->

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

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

CSS

1.CSS规范

1.1 规范约定

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

.jdc{}

不推荐:

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

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

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

1.2 代码格式化

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

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

一种是展开格式(Expanded)

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

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

1.3 代码大小写

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

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

1.4 选择器

  1. 尽量少用通用选择器 *
  2. 不使用 ID 选择器
  3. 不使用无具体语义定义的标签选择器
/* 推荐 */
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

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

1.5 代码缩进

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

.jdc {
    width: 100%;
    height: 100%;
}

1.6 分号

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

.jdc {
    width: 100%;
    height: 100%;
}

1.7 代码易读性

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

推荐:

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

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

推荐:

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

不推荐:

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

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

推荐:

.jdc {
    color: #fff;
}

不推荐:

.jdc {
    color: #ffffff;
}

不要为 0 指明单位

推荐:

.jdc {
    margin: 0 10px;
}

不推荐:

.jdc {
    margin: 0px 10px;
}

1.8 属性值引号

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

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

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

1.9 属性书写顺序

建议遵循以下顺序:

  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.10 CSS3浏览器私有前缀写法

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

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

2.CSS注释

2.1 单行注释

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

推荐:

/* Comment Text */
.jdc{}

/* Comment Text */
.jdc{}

不推荐:

/*Comment Text*/
.jdc{
	display: block;
}
.jdc{
	display: block;/*Comment Text*/
}

2.2 模块注释

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

推荐:

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


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

不推荐:

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

2.3 文件信息注释

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

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */

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

已于2022-5-30 17:20:21修改
5
收藏
回复
举报
2条回复
按时间正序
/
按时间倒序
xjj_snntH
xjj_snntH

以后尽量按照规范来

1
回复
2022-5-30 17:49:39
xjj前端妹_雅
xjj前端妹_雅 回复了 xjj_snntH
以后尽量按照规范来

nice

回复
2022-5-30 17:53:19
回复
    相关推荐