web前端代码大全_Web前端开发代码规范（基础）

最新推荐文章于 2024-05-09 08:54:47 发布

weixin_39528525

最新推荐文章于 2024-05-09 08:54:47 发布

阅读量7.2k

点赞数 2

文章标签： web前端代码大全 web前端开发规范手册阿里前端代码规范

一、引言

对于一个多人团队来说，制定一个统一的规范是必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。

二、 HTML/CSS规范

2.1 浏览器兼容

根据公司业务要求而定，一般：
主流程测试：Chrome 30+、IE9+；
完整测试： Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。

2.2 html代码规范

2.2.1声明与编码

1、html头部声明统一：

<!DOCTYPE html>

2、页面编码统一：

<meta charset="UTF-8"> <!-- ie6也支持，无须担心 -->

2.2.2格式缩进

html编码统一格式化显示，使用一个Tab键进行分层缩进 (2个空格宽度)，使整个页面结构层次清晰，方便阅读和修改。

2.2.3 模块注释

html较大独立模块之间注释格式统一使用：

<!-- start: XXX模块 -->
  …
<!-- end: XXX模块 -->

或者：

<!-- XXX模块 -->
  …
<!-- /XXX模块 -->

2.2.4标签与属性

1、由于html标签和属性不区别大小写，所有建议都采用小写，尤其是自定义标签和属性名，否定js中取不到，如：

<div data-bgColor="red"></div>

2、所有html属性必须添加双引号（非单引号）。

// 禁止
<div id=mainframe> 或 <div id='mainframe'>

// 推荐
<div id="mainframe">

3、所有标签必须采用合理嵌套。

// 禁止
<p><b></p></b>

// 推荐
<p><b></b></p>

// 禁止inline级标签嵌套block级标签
<span><div></div></span>

4、所有<、&、>等特殊符号（非标签一部分）用编码表示。< 编码成< ，>编码成>，&编码成&

5、img标签中必须添加alt属性。如：<img src="…" alt="logo" />

6、标签在运用时，应尽量使用语义化标签，如:

<h1>标题<h1>
<lable for="user">用户名：</lable>
<input name="username" id="user">

在语义不明显，既可用div也可用p时，应优先考虑p标签。

2.3 CSS代码规范

2.3.1 CSS引用规范

1、所有CSS均为外部调用，不得在页面书写任何内部样式或行内样式；

2、html页面引入样式文件：

统一使用link标签，少用@import（原生import有加载性能问题），sass、less、vue.js等文件使用import命令除外（因为最终前端构建工具会将引入文件编译成一个css文件）。

<link rel="stylesheet" href="xxx.css">

2.3.2 CSS注释规范

1、css头部文档注释( 统一加上@charset声明 )，如下：

@charset "utf-8";

/**
 * @created :   2017/09/15
 * @author  :   Mr.Wang
 * @version :   v1.0
 * @desc    :   XX模块
 */

关于"version"，如果对代码有修改更新version版本号，并添加相关注释。

2、内部模块之间注释（建议 @模块英文名，好查找）：

/* @info 商品信息区
----------------------------------------------------------------*/
.infoArea{}

/* 单行注释 */
.specArea{}

/* @price 商品价格区
----------------------------------------------------------------*/
.price{}
一、 引言
    对于一个多人团队来说，制定一个统一的规范是必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。

二、 HTML/CSS规范
2.1 浏览器兼容
根据公司业务要求而定，一般：
主流程测试ÿ

最低0.47元/天解锁文章