从事 web 前端开发工作我们就需要了解 Web 前端开发的规范, 这样才能保证 Web 前端开发工程师们可以高效快速的完成工作, 本篇文章小编和大家分享一下 Web 前端开发工程师需要注意的 Web 前端开发规范有哪些, 希望对小伙伴们有所帮助.
这里还是要推荐下小编的 Web 前端学习群: 867726593, 不管你是小白还是大牛, 小编我都欢迎, 不定期分享干货, 包括 小编自己整理的一份最新的 Web 前端资料和 0 基础入门教程, 欢迎初学和进 阶中的小伙伴. 在不忙的时间我会给大家解惑.
一, CSS 书写规范
1. 编码统一为 utf-8;
2. 协作开发及分工: i 会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构 & 表现 & 行为; 共用 CSS 文件 base.CSS 由 i 书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含 reset 及头部底部样式, 此文件不可随意修改;
3. class 与 id 的使用: id 是唯一的并是父级的, class 是可以重复的并是子级的, 所以 id 仅使用在大的模块上, class 可用在重复使用率高及子级中; id 原则上都是由我分发框架文件时命名的, 为 JavaScript 预留钩子的除外;
4. 为 JavaScript 预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;
5. class 与 id 命名: 大的框架命名比如 header/footer/wrapper/left/right 之类的在 2 中由 i 统一命名, 其他样式名称由小写英文 & 数字 & _ 来组合命名, 如 i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.
6. 规避 class 与 id 命名 (此条重要, 若有不明白请及时与 i 沟通):
a) 通过从属写法规避;
b) 取父级元素 id/class 命名部分命名;
c) 重复使用率高的命名, 请以自己代号加下划线起始, 比如 i_clear;
d)a,b 两条, 适用于在 2 中已建好框架的页面, 如, 要在 2 中已建好框架的页面代码中加入新的 div 元素.
7. CSS 属性书写顺序, 建议遵循: 布局定位属性 -> 自身属性 -> 文本属性 -> 其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起;
8. 书写代码前, 考虑并提高样式重复使用率;
9. 充分利用 html 自身属性及样式继承原理减少代码量;
10. 样式表中中文字体名, 请务必转码成 unicode 码, 以避免编码错误时乱码;
11. 背景图片请尽可能使用 sprite 技术, 减小 http 请求, 考虑到多人协作开发, sprite 按模块制作;
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;} table th, table td{padding:0;}, base.CSS 文件中我会初始化表格样式);
13. 如果可以请少使用兼容;
14. 用 PNG 图片做图片时, 要求图片格式为 PNG-8 格式, 若 PNG-8 实在影响图片质量或其中有半透明效果, 请为 ie6 单独定义背景;
15. 避免兼容性属性的使用, 比如 text-shadow || css3 的相关属性;
16. 减少使用影响性能的属性, 比如 position:absolute || float ;
17. 必须为大区块样式添加注释, 小区块适量注释;
18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化会统一处理;
二, JavaScript 书写规范
1. 文件编码统一为 utf-8, 书写过程, 每行代码结束必须有分号; 原则上所有功能均根据 XXX 项目需求原生开发, 以避免网上 down 下来的代码造成的代码污染 (沉冗代码 || 与现有代码冲突 || ...);
2. 库引入: 原则上仅引入 jQuery 库, 若需引入第三方库, 须与团队其他人员讨论决定;
3. 变量命名: 驼峰式命名. 原生 JavaScript 变量要求是纯英文字母, 首字母须小写;
4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
5. 函数命名: 首字母小写驼峰式命名. 如 iTaoLun();
6. 命名语义化, 尽可能利用英文单词或其缩写;
7. 尽量避免使用存在兼容性及消耗资源的方法或属性;
8. 后期优化中, JavaScript 非注释类中文字符须转换成 unicode 编码使用, 以避免编码错误时乱码显示;
9. 代码结构明了, 加适量注释. 提高函数重用率;
10. 注重与 HTML 分离, 减小 reflow, 注重性能.
来源: http://www.jianshu.com/p/6624f7dde552