Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。

A.基本原则

符合web标准(UTF-8,HTML5),语义化html(HTML5新增要求,减少div和span等无特定语义的标签使用),结构表现行为分离(HTML-CSS-JS代码分离,不同行为代码高内聚低耦合),兼容性优良(早期版本浏览器兼容,移动端和PC端设备兼容).页面性能方面(减少请求次数,例如使用精灵图和sass语法),代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度(减小repaint和reflow).

B.文件命名规范

1、html,css,js,lib,images文件均存放至项目的目录中。如果使用相关前端框架,根据框架的文件格式进行合理布局。

2、所有文件夹及文件使用英文命名(避免使用中文路径)。

3、html文件:入口文件使用index.html。如果有对应的设计组设计原稿,需要将对应的设计稿和html文件命名一致并合理存放。

4、css文件命名:后缀.css。通用initial.css,初始化base.css,首页index.css,其他页面按照对应的html命名。

5、Js文件命名:英文命名,后缀.js.通用common.js,初始化base.js。 其他页面按照对应的html命名。

自己是一个五年的前端工程师

这里推荐一下我的前端学习交流qq群: 851231348,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入。

C.HTML规范

1、文档类型声明及编码:统一为html5声明类型。书写时利用IDE实现层次分明的缩进(默认缩进4空格)。

2、非特殊情况下CSS文件放在body部分标签后。非特殊情况下大部分JS文件放在标签尾部(如果需要界面未加载前执行的代码可以放在head标签后)避免行内JS和CSS代码。

3、所有编码需要遵循html(XML)标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等。属性值用双引号。

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

5、书写页面过程中,请考虑向后扩展性。class&id参见css书写规范.

6、需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用须以"data-"为前缀来添加自定义属性,避免使用"data:"等其他命名方式。

7、语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素。

8、尽可能减少div多层级嵌套。

9、书写链接地址时,必须避免重定向,例如:href="http://myVue.com/",即须在URL地址后面加上“/”;

10、在页面中尽量避免使用style属性,即style="…"。

11、必须为含有描述性表单元素(input,textarea)添加label,如姓名:须写成:姓名:

12、能以背景形式呈现的图片,尽量写入css样式中。

13、重要图片必须加上alt属性。给重要的元素和截断的元素加上title。

14、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能。

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

D.CSS规范

1、编码规范为utf-8。

2、协作开发及分工:i会根据各个模块,同时根据页面相似程序,事先写**体框架文件,分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写,协作开发过程中,每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改。

3、class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的,为JS预留钩子的除外。

4、为JS预留钩子的命名,请以js_起始,比如:js_hide,js_show。

5、class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名,如i_comment,fontred,width200。避免使用中文拼音,尽量使用简易的单词组合。总之,命名要语义化,简明化

6、规避class与id命名(此条重要,若有不明白请及时与i沟通):a)通过从属写法规避,示例见d。b)取父级元素id/class命名部分命名,示例见d。c)重复使用率高的命名,请以自己代号加下划线起始,比如i_clear。d)a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码中加入新的div元素,按a命名法则:...,样式写法:#mainnav.firstnav{.......}按b命名法则:...,样式写法:.main_firstnav{.......}

7、css属性书写顺序,建议遵循:布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.属性列举:布局定位属性主要包括:display&list-style&position(相应的top,right,bottom,left)&float&clear&visibility&overflow;

自身属性主要包括:width&height&margin&padding&border&background。

文本属性主要包括:color&font&text-decoration&text-align&vertical-align&white-space&

其他&content。

8、书写代码前,提高样式重复使用率。

9、充分利用html自身属性及样式继承原理减少代码量,例如:

即可实现日期居右显示

ul.list li {

position:relative

}

ul .list li span {

position:absolute;right:0

}

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

11、背景图片请尽可能使用精灵图技术,减小http请求,考虑到多人协作开发,精灵图按模块制作。

12、使用table标签时(尽量避免使用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。}tableth,tabletd{padding:0。},base.css文件中我会初始化表格样式)

13、杜绝使用兼容ie8。

14、用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:_background:none。_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=’img/bg.png’)。

15、避免兼容性属性的使用,比如text-shadow||css3的相关属性。

16、减少使用影响性能的属性,比如position:absolute||float。

17、必须为大区块样式添加注释,小区块适量注释。

18、代码缩进与格式:建议单行书写,可根据自身习惯,后期优化会统一处理。

E. JS书写规范

1、文件编码统一为utf-8,书写过程过,每行代码结束必须有分号。原则上所有功能均根据XXX项目需求原生开发,以避免网上down下来的代码造成的代码污染(沉冗代码||与现有代码冲突||...)。

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

3、变量命名:驼峰式命名.原生JS变量要求是纯英文字母,首字母须小写,如myVue。jQuery变量要求首字符为'_',其他与原生JS规则相同,如:_myVue。另,要求变量集中声明,避免全局变量.

4、类命名:首字母大写,驼峰式命名.如MyVue。

5、函数命名:首字母小写驼峰式命名.如myVue()。

6、命名语义化,尽可能利用英文单词或其缩写。

7、尽量避免使用存在兼容性及消耗资源的方法或属性,比如eval_r()&innerText。

8、后期优化中,JS非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示。

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

10、注重与html分离,减小reflow,注重浏览器性能.

F.图片规范

1、所有页面元素类图片均放入img文件夹,测试用图片放于demo文件夹。

2、图片格式gif/png/jpg。提倡使用webp文件格式,使用软件进行图片压缩。

3、命名全部用小写英文字母||数字||_的组合,其中不得包含汉字||空格||特殊字符;尽量用易懂的词汇,便于团队其他成员理解。另,命名分头尾两部分,用下划线隔开,比如ad_left01.gif||btn_submit.gif。

4、在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间。5、尽量避免使用半透明的png图片(若使用,请参考css规范相关说明)。

6、运用css精灵图技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的精灵图psd源图中划参考线,并保存至img目录下

G.测试规范

开发及测试工具约定建议使用Aptana-Sublime-Vim-WebStrom,亦可根据自己喜好选择,但须遵循如下原则:

1、不可利用IDE的视图模式'画'代码。

2、不可利用IDE生成相关功能代码。

3、编码必须格式化,比如缩进。测试工具:前期开发仅测试FireFox&IE6&IE7&IE8,后期优化时加入Opera&Chrome&Safari。建议测试顺序:FireFox-->IE-->Opera-->Chrome-->Safari。

自己是一个五年的前端工程师

十位大牛做出的web前端开发规范总结的更多相关文章

  1. WEB前端开发规范

    WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...

  2. WEB前端开发规范文档(转)

    http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...

  3. 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  4. Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  5. WEB前端开发规范文档[转]

    为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...

  6. Web 前端开发规范手册

    一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...

  7. Web前端开发规范【HTML/JavaScript/CSS】

    前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规 ...

  8. Web前端开发规范手册

    一.规范目的 1.1  概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.  ...

  9. Web前端开发规范文档(google规范)

    (Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 区分大小写 xhtml  区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合. css 元素名称以及i ...

随机推荐

  1. Java实现 LeetCode 538 把二叉搜索树转换为累加树(遍历树)

    538. 把二叉搜索树转换为累加树 给定一个二叉搜索树(Binary Search Tree),把它转换成为累加树(Greater Tree),使得每个节点的值是原来的节点值加上所有大于它的节点值之和 ...

  2. Java实现 LeetCode 391 完美矩形

    391. 完美矩形 我们有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域. 每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 ...

  3. Android Button的四种点击事件

    bta1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.m ...

  4. Java实现判断单联通(强连通缩点+拓扑排序)Going from u to v or from v to u

    Description In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has ...

  5. Python面试常用的高级用法,怎么动态创建类?

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题的第16篇文章,今天我们来聊聊Python当中的元类. 元类是Python当中的高级用法,如果你之前从来没见过这个术语 ...

  6. 1.keras-构建基本简单网络实现线性回归

    构建基本简单网络实现线性回归 1.创建数据绘制散点图 import keras import numpy as np import matplotlib.pyplot as plt from kera ...

  7. iOS -UIColor随机生成颜色的方法

    在iOS 中的UIColor拥有这么多关于颜色的类方法,对于一般常见的UI控件,我们可以通过[UIColorblackColor]设置背景色 eg:设置button 的背景色为红色 UIButton ...

  8. 对学长TD课程通(.apk)的评价

    界面简介: 界面分为三个部分,第一部分是对课程表的添加,第二部分是对空闲教室的查询,第三部分是实时时间的展示和对软件的评价,实用性很强,仅限于本校学生,界面观赏性较差,从界面上对人的吸引力不够, 实用 ...

  9. 关于MYSQL的查询时间段、删除数据、查询目标行的命令用法。

    Q1.第一次工作写命令时,写了一个把一个表的数据插入到另一个表中,运行时命令长时间处于执行状态. A.第一次处理数据库大量数据,长时间按运行属于正常现象,这与学校中的小数据不同. Q2.如何查询数据库 ...

  10. PytorchMNIST(使用Pytorch进行MNIST字符集识别任务)

    都说MNIST相当于机器学习界的Hello World.最近加入实验室,导师给我们安排了一个任务,但是我才刚刚入门呐!!没办法,只能从最基本的学起. Pytorch是一套开源的深度学习张量库.或者我倾 ...