前端代码编写规范资源-CSDN文库

5星 · 超过95%的资源需积分: 10 167 浏览量 2013-10-13 21:02:05 上传评论 1 收藏 19KB DOCX 举报

《前端代码编写规范》前端页面的编码规范是提升团队协作效率、确保代码质量和易于维护的重要准则。这一规范旨在引导开发者深入理解HTML、CSS、JavaScript，并优化页面性能。以下是具体的编码指导原则： **文件规范** 1. HTML、CSS、JS、图片文件应按照《系统开发规范》中的目录结构存放。 2. HTML文件使用英文命名，后缀为.htm，同时需与对应的界面稿放在同一目录，界面稿命名与HTML文件保持一致。 3. CSS文件同样使用英文命名，后缀为.css，基础样式用base.css，首页用index.css，其他页面根据模块需求命名。 4. JS文件遵循英文命名，后缀为.js，通用脚本用common.js，其余按模块需求命名。 **HTML书写规范** 1. 使用HTML5文档类型声明<!DOCTYPE html>，编码统一为GBK。 2. 样式文件链接置于<head>标签内，JavaScript文件放在页面底部。 3. 引入样式和脚本文件时省略类型声明，如<link rel="stylesheet" href="…" />。 4. JS库文件名包含库名、版本号和.min（压缩版），插件文件名为库名+插件名。 5. 遵循XHTML标准，标签、属性及命名全小写，所有标签必须闭合，属性值用双引号包围。 6. 充分利用语义化的HTML标签，如span、em、strong等，自定义属性以"data-"为前缀。 7. 语义化HTML，如使用h*标题，p段落，ul列表等。 8. 减少div嵌套，利用更适合的元素替代。 9. 链接地址避免重定向，末尾加"/"。 10. 避免在元素中使用内联样式，如style="…"。 11. 描述性表单元素应添加label，如<label for="name">姓名:</label><input type="text" id="name" />。 12. 图片作为背景时放入CSS，重要图片添加alt属性，关键元素和截断元素添加title。 13. 注释区块代码和重要功能，方便后台人员操作。 14. 特殊符号用代码表示，如<、>、空格等。 15. 考虑代码的可扩展性。 16. class和id命名遵循CSS书写规范。 **CSS书写规范** 1. 编码统一为UTF-8。 2. 根据模块和页面相似度划分工作，预先编写框架文件，共用的base.css由专人编写。 3. CSS代码应清晰、有序，便于阅读和维护，避免冗余。 4. 使用选择器组合以提高代码效率，如类选择器、ID选择器、伪类等。 5. 避免过度使用!important，确保样式的可调整性。 6. 将复用的样式抽取为类，避免重复代码。 7. 注释清晰，解释代码目的和作用。遵循这些规范，前端开发不仅可以提高代码质量，还能增强团队协作，使得代码更易读、易维护，从而提升整体项目效率和用户体验。在日常开发中，应时刻牢记这些规范，不断优化代码，提升个人专业素养。

资源推荐

资源详情

资源评论

规范目的

为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制

订此文档本规范文档一经确认前端开发人员必须按本文档规范进行前台页面开发本文档

如有不对或者不合适的地方请及时提出经讨论决定后方可更改

基本准则

符合  标准语义化 结构表现行为分离兼容性优良页面性能方面代码要求简洁

明了有序尽可能的减小服务器负载保证最快的解析速度

文件规范

 文件均归档至系统开发规范约定的目录中

 文件命名英文命名后缀同时将对应界面稿放于同目录中若界面稿命名为中

文请重命名与  文件同名以方便后端添加功能时查找对应页面

 文件命名英文命名后缀共用 首页 其他页面依实际模块需求

命名

 文件命名英文命名后缀共用 其他依实际模块需求命名

html 书写规范

文档类型声明及编码统一为  声明类型 !"#$%&'编码统一为()

*+*,书写时利用 -!' 实现层次分明的缩进

非特殊情况下样式文件必须外链至.,之间非特殊情况下 /(0 文件必

须外链至页面底部

引入样式文件或 /(0 文件时须略去默认类型声明写法如下







引入  库文件文件名须包含库名称及版本号及是否为压缩版比如 12(34引

入插件文件名格式为库名称5插件名称比如 62(3+

所有编码均遵循  标准标签Æ7属性Æ7属性命名Æ必须由小写字母及下划线数字组成

且所有标签必须闭合包括 (8(,9(8(,9等属性值必须用双引号包括

:充分利用无兼容性问题的  自身标签比如 0(0(20等等需要

为  元素添加自定义属性的时候首先要考虑下有没有默认的已有的合适标签去设置如

果没有可以使用须以”4*为前缀来添加自定义属性，避免使用”*等其他命名方式

;语义化 如Æ标题根据重要性用 <8同一页面只能有一个 9段落标记用 0列表用 2

内联元素中不可嵌套块级元素

=尽可能减少 / 嵌套如

欢迎访问



您的用户名

是



用户名



完全可以用以下代码替代





欢迎访问



您的用户名是



用户名



>书写链接地址时必须避免重定向，例如：(?)*@0,,2,*即须在 ABC 地址后

面加上“,*；

D在页面中尽量避免使用 3 属性即 3)*.*

必须为含有描述性表单元素802(9添加 如

姓名

 



须写成



姓名

 



能以背景形式呈现的图片尽量写入  样式中

重要图片必须加上  属性给重要的元素和截断的元素加上 E

给区块代码及重要功能8比如循环9加上注释方便后台添加功能

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

王java浩

2014-04-08

还行吧，有一定的价值

shirley_yu_925

粉丝: 0
资源: 1

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip