文豆Web前端开发规范手册V1.2.docx
1、文豆Web前端规范手册V1.2
文豆Web前端开发规范手册
更新记录
版本号
日期
更新内容
修订
V1.0
2010-05-01
创建文档
宋敏鹏
V1.1
2011-02-01
修改细节
宋敏鹏
V1.2
2015-05-28
修改细节
宋敏鹏
文豆WEB前端开发规范手册
1、规范目的 3
2、基本准则 3
3、文件规范 3
3.1 目录结构 3
3.2 html 文件命名 4
3.3 css
2、文件命名 4
3.4 js文件命名 4
4、HTML 书写规范 4
4.1 编码 4
4.2 文档类型声明 4
4.3 语法 4
4.4 文件引入 5
4.5 语义化 html 5
5、CSS 书写规范 6
5.1 编码 6
5.2 协作开发及分工 6
5.3 CSS语法 6
5.4 class 与 id 命名 6
5.6 属性列举 7
5.7 CSS优化 7
6、JAVASCRIPT 书写规范 7
6.1 编码 7
6.2 语法 7
6.3 变量命名 7
6.4 变量声明 8
7、注释规范 8
7.1 html 注释 8
7.2 css 注释 8
3、
7.3 JavaScript 注释 8
8、图片规范 8
9、开发测试工具约定 9
1、规范目的
为提高团队协作效率,便于后台开发人员套页面及前端后期优化维护,输出 高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前端页面制作。本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。
2、基本准则
编写符合 w3c 标准,语义化的 html,实现结构、表现、行为分离;浏览器兼容性优良(暂定 IE、chrome、firefox)。 页面性能方面,代码要求简洁有序, 尽可能的减小服务器负载,注重 css 代码质
4、量,保证浏览器能最快的解析。
3、文件规范
3.1 目录结构
css、js、images 文件均归档至约定的目录中。 约定目录为:
/
/index.html
/images/
/css/
base.css
/js/
common.js
jquery-1.9..min.js
可根据需要创建子目进行分类。
3.2 html 文件命名
英文命名,后缀为.html
3.3 css 文件命名
英文命名,后缀为.css。公用 css 请放在 base.css 中,重置样式浏览器内置样式的 css 为 reset.css,其它css 文件根据页面名称命名。
3.4
5、js文件命名
英文命名, 后缀为.js。公用 js 请放在 common.js 中, 其他依模块需求命名。
注:所有文件命名,由多个单词组成时,采用中划线连接方式,比如:账号
模型文件 account-model.js,错误报告页面 error-report.html 等。
4、html 书写规范
4.1 编码
统一为 utf-8 编码。
4.2 文档类型声明
HTML5 声明类型 ，移动端页面必须用这个类型。
4.3 语法
代码书写时实现层次分明的缩进。所有的标签 、属性
6、属性命名必须由小写字母及连接线(-)组成, 且所有标签必须闭合; 属性值必须用双引号。
不要在自动闭合标签结尾处使用斜线(HTML5 规范指出他们是可选的)。
充分利用无兼容性问题的 html 自身标签, 比如 em, strong, label 等。
需要为 html 元素添加自定义属性的时候, 首先要考虑有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性(可用 jquery 的 data()函数获取属性值),避免使用"data:" 等其他命名方式。
在标签中尽量避免使用 style 属性,即 style="..."。
4.4 文件引
7、入
一般情况下CSS样式文件必须外链至
...之间;
一般情况下 javascript 文件必须外链至页面底部。
引入js库文件, 文件名须包含库名称及版本号及是否为压缩版, 比 如 jquery-1.9.2.min.js;
引入插件, 文件名格式为库名称.插件名称,比如 jQuery.cookie.js。
4.5 语义化 html
如标题根据重要性用 h*(同一页面只能有一个 h1), 段落标记用 p, 列表用 ul, 内联元素中不可嵌套块级元素。
尽可能减少 div 嵌套等，如：
8、e">欢迎访问XXX, 您的用 户名是用户名
完全可以用以下代码替代:
欢迎 访问XXX, 您的用户名是用户名
;
尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
书写链接地址时, 必须避免重定向,例如:href=" 即须在 URL 地址后面加上“/”;
必须为含有描述性表单元素(input, textarea)添加 label，如：
姓 名: 9、nput type="text" id="name" name="name" />
须写成:
姓名:
能以背景形式呈现的图片, 尽量写入 css 样式中;
重要图片必须加 上 alt 属性; 给重要的元素和截断的元素加上title;
给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
特殊符号使用:尽可能使用 html 实体字符。
4.6 属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
id
class
10、name
data-*
src, for, type, href title, alt
5、css 书写规范
5.1 编码
统一为 utf-8。
5.2 协作开发及分工
根据各个模块，根据页面相似性, 事先写好大体框架文件,分配给前端人员实现内部细节;公用 css 文件 base.css 在制定框架时完成, 协作开发过程中, 每个页面请务必都要引入, 此文件包含头部底部样式, 此文件不可随意修改;每个页面必须引入 reset.css 文件。
5.3 CSS语法
使用组合选择器时,保持每个独立的选择器占用一行。 声明块的右括号应该另起一行。 每条声明应该只占用一行来保证错误报
11、告更加准确。 尽可能使用短的十六进制数值,例如使用 #fff 替代 #ffffff。 不要为 0 指明单位,比如使用 margin: 0; 而不是 margin: 0px。
所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的,但是如果没有他,你的代码会更容易出错。
所有的十六进制值都应该使用小写字母,例如 #fff。因为小写字母 有更多样的外形,在浏览文档时,他们能够更轻松的被区分开来。
为选择器中的属性取值添加引号,例如 input[type="text"]。 他们只在某些情况下可有可无,所以都使用引号可以增加一致性。
5.4 class 与 id 命名
大的框架命名比如 h
12、eader/footer/wrapper/left/right 之类的统一命名. 其他样式名称由小写英文字母、数字、链接线来组合命名, 如 i-comment, width-200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化。
5.5 css 属性书声明顺序
建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起。
5.6 属性列举
布局定位属性主要包括: display & list-style & position(相应的 top,right,bottom,left) & fl
13、oat & clear & visibility & overflow。
自身属性主要包括:width & height & margin & padding & border & background。
文本属性主要包括:color & font & text-decoration & text-align & vertical-align & white- space。
所列出的这些属性只是最常用到的, 并不代表全部;书写代码前, 考虑并提高样式重复使用率。
5.7 CSS优化
css 属性的尽量简写,移除空的 css 规则,如 a{}。
中文字体名, 请务必转码成 unico
14、de 码, 以避免编码错误时乱码;背景图片请尽可能使用 sprite 技术, 减小 http 请求, 考虑到多人协作开发,sprite 按模块制作;减少使用影响性能的属性, 比如 position:absolute || float。
正确使用显示属性:如 display:line 不要和 width,height,float, margin,padding 同时使用;display:line-block 不要和 float 同时使用。
6、Javascript 书写规范
6.1 编码
文件编码统一为 utf-8。
6.2 语法
行代码结束必须有分号,字符常量一般情况下统一使用 '
15、' 单引号。
6.3 变量命名
驼峰式命名。原生 JavaScript 变量要求是纯英文字母, 首字母须小写, 如 myTest Var;另,要求变量集中声明,避免全局变量。
常量命名:采用大写字母,下划线连接的方式,如 MAX_COUNT。
类命名:首字母大写, 驼峰式命名,如 MyTestClass。
函数命名:首字母小写驼峰式命名, 如 myTestFun ()。
命名语义化, 尽可能利用英文单词或其缩写。
6.4 变量声明
所有函数内变量声明放在函数内头部,只使用一个 var(多了 JSLint 报错), 一个变量一行。
6.5 后期优化
JavaScript 非
16、注释类中文字符打包成独立的语言包, 以避免 js 混淆 后出现乱码;尽量将 js 压缩或混淆。代码结构明了, 加适量注释. 提高函数重用率。
尽量避免使用存在兼容性及消耗资源的方法或属性, 比如 eval() 。
7、注释规范
7.1 html 注释
注释格式 , '--'只能在注释的始末位置,不可置入注释文字区域;
7.2 css 注释
注释格式 /*这儿是注释*/;
7.3 JavaScript 注释
单行注释使用://这儿是单行注释
多行注释使用: /* 多行注注释*/
8、图片规范
所有页面元素类图片均放入 images 文件夹;
图片
17、格式仅限于 gif 、png 、 jpg;
命名全部用小写英文字母 、数字、连接线的组合,其中不得包含汉字、空格、特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另外命名分头尾两部分, 用连接线链接, 比如 ad-left01.gif || btn-submit.gif;
在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少页面加载 时间。运用 css sprite 技术集中小的背景图或图标, 减小页面 http 请求, 但注意, 请 务必在对应的 css sprite 的 psd 源文件中划参考线, 并保存至 images/psd 目录下.
用png图片做图片时, 要求图
18、片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’images/bg.png’);
9、开发测试工具约定
建议使用 Sublime|| DW , 亦可根据自己喜好选择, 但须遵循如下原则: 不可利用 IDE 的视图模式'画'代码;
不可利用IDE生成相关功能代码, 比如DW内置的一些功能js;代码必须格式化, 比如缩进和排版;
测试工具
19、 前期开发仅测试 FireFox -->IE8 ,后期优化时加入 Chrome & Safari;建议测试顺序: FireFox-->IE8--->Chrome-->Safari,建议安装 firebug 及 IE Tab Plus 插件.
10、其他规范
开发过程中严格按分工完成页面, 以提高 css 复用率, 避免重复开发。
减小沉冗代码, 书写所有人都可以看的懂的代码。 简洁易懂是一种美德. 为 用户着想, 为服务器着想。
附：
DIV+CSS 命名规范
1.CSS ID 的命名
外 套： wrap
主导航： mainnav
子导
20、航： subnav
页 脚： footer
整个页面： content
页 眉： header
页 脚： footer
标 签： label
标 题： title
主导航： mainbav（globalnav）
顶导航： topnav
边导航： sidebar
左导航： left-sidebar
右导航： right-sidebar
旗 志： logo
标 语： banner
菜单内容： menu-content
菜单容器： menu-container
子菜单： submenu
边导航图标：s
21、idebar-icon
注释： note
面包屑： breadcrumb(即页面所处位置导航提示)
容器： container
内容： content
搜索： search
登陆： login
功能区： shop(如购物车，收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写：
<-- Footer -->
内容区
<-- End Footer -->
3.样式文件命名
基本的 base.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
10
浙ICP备2021020529号-1 | 浙B2-20240490 
