前端开发规范手册.docxVIP

前端开发

规范手册

目录

TOC\h\h基本原则

\hHTML

\h通用约定

\h语义化

\hHEAD

\hCSS

\h通用约定

\h字体排印

\h模块组织

\hLess规范

\h性能优化

\hJavaScript

\h通用约定

\hjQuery规范

\h性能优化

\h移动端优化

\h工具箱

介紹

前端开发规范手册

此手册主要实现的目标：代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的

效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。

此手册是在开发中积累下来的经验和参考其它规范/指南制定的，它只是起指导作用，除个别条目强制之外，大多数为

非强制约束，开发者可根据自己的实际情况自行决定是否要遵守该指南只是保证大方向一致性和最佳实践的阶段性总

结，不是最后结论，它会随着时间而变化。

介紹

-5-

基本原则

基本原则

结构、样式、行为分离

尽量确保文档和模板只包含HTML结构，样式都放到样式表里，行为都放到脚本里。

缩进

统一两个空格缩进（总之缩进统一即可），不要使用Tab或者Tab、空格混搭。

文件编码

使用不带BOM的UTF-8编码。

在HTML中指定编码metacharset=utf-8；

无需使用@charset指定样式表的编码，它默认为UTF-8（参考\h@charset）；

一律使用小写字母

1.!--Recommended--

2.imgsrc=google.pngalt=Google3.

4.!--Notrecommended--

5.AHREF=/Home/A

1./*Recommended*/

2.color:#e5e5e5;

3.

4./*Notrecommended*/

5.color:#E5E5E5;

省略外链资源URL协议部分

省略外链资源（图片及其它媒体资源）URL中的http/https协议，使URL成为相对地址，避免

\hMixedContent问题，减小文件字节数。

其它协议（ftp等）的URL不省略。

1.!--Recommended--

2.scriptsrc=///js/gweb/analytics/autotrack.js/script3.

4.!--Notrecommended--

5.scriptsrc=/js/gweb/analytics/autotrack.js/script-6-

基本原则

1./*Recommended*/

2..example{

3.background:url(///images/example);4.}

5.

6./*Notrecommended*/

7..example{

8.background:url(/images/example);9.}

统一注释

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

HTML注释

模块注释

1.!--文章列表列表模块--

2.divclass=article-list

3....

4./div

区块注释

!--

@name:DropDownMenu

@description:Styleoftopbardropdownmenu.

@author:Ashu(Aaaaaashu@)

--

CSS注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

-7-

基本原则

/*==========================================================================

组件块

============================================================================*/

/*子组件块

============================================================================*/

.selector{

padding:15px;

margin-bottom:15px;

}

/*子组件块

============================================================================*/

.selector-sec