前端规范标准(一)

目录

1 、 规范目的

2 、 基本准则

3 、 文件规范

4 、 文件规范

5 、 html 书写规范

6 、 css 书写规范

7 、 JavaScript 书写规范

8 、 图片规范

9 、 注释规范

10 、 开发及测试工具约定

11 、 其他规范

12 、 CSS Hack

 

1  规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。本文档如有不对或者不合适的地方请提出来

 

2  基本准则

符合 web 标准, 语义化 html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

 

3  文件规范

3.1、 html, css, js, images 文件均归档至<系统开发规范>约定的目录中;

3.2、 html 文件命名:命名以中文命名， 依实际模块命名， 如果同一模块以_& title& _ 来组合命名, 以方便添加功能时查找对应页面，团结里的相互理解。

3.3、 css 文件命名: 英文命名, 后缀.css. 初始化样式 reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的 css 文件可以采用&_时间日期

3.4、Js 文件命名: 英文命名, 后缀.js. 共用 common.js, 其他依实际模块需求命名.

3.5、图片命名:

 

4   html  书写规范

 

4.1、文档类型声明及编码: 统一用; 编码统一为。 目的:统一性和网站提高开发合作效率。

4.2、非特殊情况下样式文件必须外链至„之间;非特殊情况下 JavaScript 文件必须外链至页面底部之前; 目的:网站的优化。

4.3、所有编码均遵循 xhtml 标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (), hr()等; 属性值必须用双引号包括; 目的:更加符合 web 标准 (w3c),也有利于 seo。

4.4、充分利用无兼容性问题的 html 自身标签, 比如 span, em, strong, optgroup, label,等等 目的：减少代码量

4.5、 语义化 html, 如 标题根据重要性用 h*(同一页面只能有一个 h1), 段落标记用 p, 列表用 ul, 内联元素中不可嵌套块级元素; 目的：减少代码量，也有利于 seo

4.5、尽可能减少 div 嵌套, 如欢迎访问 XXX, 您的用户名是用户名

完全可以用以下代码替代: 欢迎访问 XXX, 您的用户名是用户名

< /div>; 目的：减少代码量，也有利于 seo

4.6、 引入 JS 库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如 jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如 jQuery.cookie.js;

4.7、书写链接地址时, 必须避免重定向，例如：href=” http://www.haogu.com/”, 即须在 URL 地址后面加上“/”；

4.8、在页面中尽量避免使用 style 属性,即 style=”„”除非考虑网站 http 请求，网站响应速度等因素比重情况具体分析;

4.9、严格区分作为内容的图片和作为背景的图片。作为背景的图片采用 Css sprite 技术，放在一张大图里。Css sprite 技术的优点是减少了 http 请求数，但使图片面向 css 的 backround-position 增加了耦合度，也增加了维护成本。如果图片有修改，不要删除已添加的图片，在空白处新增修改后的图片，减少修改风险。

4.10、图片必须加上 alt 属性; 给重要的元素和截断的元素加上 title; 目的:有利于 seo，搜索引擎的爬虫。

4.11、给区块代码及重要功能(比如循环)加上注释, 方便后台程序员嵌套模版;

4.12、特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;

4.13、书写页面过程中, 请考虑向后扩展性;

 

5  css  书写规范

5.1 编码统一为 utf-8;都用小写

5.2 class 与 id 的使用: 一般都使用 class，特殊除外，因 id 的优先级比 class 的高

5.3 样式命名推荐使用英文避免使用汉语拼音, 尽量使用简易的单词组合。命名方式采用驼峰命名法和划线命名法两种，提高可读性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。 划线命名法表明从属关系。 如： “.timeList” 和 “.time_list”分别表示时间列表和时间部分下的列表。

5.4 css 属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起.

5.5 避免滥用自选择器。#test span｛｝和#test .span｛｝尽量选择后者。 采用继承属性还是新加class 根据不同情况灵活运用。新加 class 便于扩展维护。

5.6 样式表中中文字体名, 请务必转码成 unicode 码, 以避免编码错误时乱码;

5.7 使用 table 标签时, 请不要用 width/ height/cellspacing/cellpadding 等 table 属性直接定义表现, 应尽可能的利用 table 自身私有属性分离结构与表现, 如

thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing 及 cellpadding 的 css 控制方法:

table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} ,

base.css 文件中我会初始化表格样式)

5.8 尽量不使用 兼容ie8,和代码*html写法。

5.9 用 png 图片做图片时, 要求图片格式为 png-8 格式,若 png-8 实在影响图片质量或其中有半透明效果

5.10 兼容性属性的使用, 比如 text-shadow（文字阴影）、css3 的相关属性在保证目前主流浏览器使用正常的情况下可以使用来对页面进行锦上添花式的设计。继承属性示例：

这儿是标题列表2010-09-15

样式表：ul.list li{position:relative} ul.list li span{position:absolute; right:0}即可实现日期居右显示

1.  定位属性（比如：display, position, float, clear, visibility, table-layout 等）

2.  自身属性（比如：width, height, margin, padding, border 等）

3.  文本属性（比如：font, line-height, text-align, text-indent, vertical-align 等）

4.  其他属性（比如：color, background, opacity, cursor,content, list-style, quotes 等）

 

A 级－交互和视觉完全符全设计的要求

B 级－视觉上允许有所差异，但不破坏页面的整体效果

C 级－可忽略设计上的细节，但不防碍使用

 

5.11 减少使用影响性能的属性, 比如 position:absolute || float ;

5.12 必须为大区块样式添加注释, 小区块适量注释;

5.13 代码缩进与格式:单行书写, 统一使用 tab 进行缩进。;

目的：s css  书写规范主要提高效率方便面想关人员的修改，提高网站的扩展性( ( 根据网站情况不一样，

要灵活应用) )

6  JavaScript  书写规范

6.1 文件编码统一为 utf-8, 书写过程过, 每行代码结束必须有分号; 要检查网上 down 下来的代码造

成的代码污染(沉冗冲突，代码注入„)等，有的可以 firefox 的一些扩展插件分析;

6.2 库引入: 原则上仅引入 jQuery 库, 若需引入第三方库, 须与团队其他人员讨论决定;

6.3 命名语义化, 尽可能利用英文单词或其缩写;

6.4 代码结构明了, 加适量注释. 提高函数重用率;

6.5 注重与 html 分离, 减小 reflow, 注重性能.

目的：避免带来的问题及冲突，网站的优化。

7  图片规范

7.1 所有页面元素类图片均放入 images 文件夹,

7.2 图片格式仅限于 gif || png || jpg;

7.3 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽

量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如

ad_left01.gif || btn_submit.gif;

7.4 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

7.5 尽量避免使用半透明的 png 图片(若使用, 请参考 css 规范相关说明);

7.6 运用 css sprite 技术集中小的背景图或图标, 减小页面 http 请求, 但注意, 请务必在对应的

sprite psd 源图中划参考线, 并保存至 images 目录下.

 

8  注释规范

8.1 html 注释: 注释格式 , “-”只能在注释的始末位置,不可置入注释文字区域;

8.2 css 注释: 注释格式 /*这儿是注释*/;

8.3 JavaScript 注释, 单行注释使用“//这儿是单行注释” ,多行注释使用 /* 这儿有多行注释 */;

 

/*

* @description: 中文说明

* @author: name

* @update: name (2013-04-13 18:32)

*/

 

/* module: module1 by 张三 */

…

/* module: module2 by 张三 */

/* this is a short comment */

/*

* this is comment line 1.

* this is comment line 2.

*/

 

/* Header */

/* Footer */

/* Gallery */

9  开发及测试工具约定

9.1 编码必须格式化, 比如缩进;

9.2 测试工具: 前期开发仅测试 FireFox & IE7 & IE8 & Chrome, 后期优化时加入 Opera ;

9.3 建议测试顺序: FireFox–>IE7–>IE8–>Opera–>Chrome, 建议安装 firebug 及 IE Tab Plus 插

件.

 

10  其他规范

10.1 开发过程中严格按分工完成页面, 以提高 css 复用率, 避免重复开发;

10.2 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务

器着想.

 

11 CSS Hack

即便是完美的 CSS 也未必能在目前众多的终端浏览器中呈现一致的效果，所以，CSS Hack 在很多情

况下都是必要的，建议先以对 CSS 标准支持得比较好的浏览器（比如“Firefox”或者“Chrome”）为主编

辑 CSS ，最后再处理 IE 的兼容性——单独为 IE 建立一个 CSS 文件（比如 for-ie.css, fuck-ie.css,

ie-hack.css 等） ，最后在 HTML 文件中，通过 IE 的条件注释按需引用。

转载于:https://www.cnblogs.com/BaishangBloom/p/5165977.html