web前端开发规范手册.doc

前端开发规范手册修订历史记录日期版本说明作者年月日初稿李腾目录修订历史记录 一、规范目的概述目的 二、基本准则 三、文件规范 文件命名规则 的命名原则 图片的命名原则 .的命名原则 动态语言文件命名原则 文件存放位置规范 书写规范 基本原则 注意细则 命名规则 书写规范 区代码规范 区代码规范 书写规范 图片规范 图片细节处理的国际标准规范 页面修饰图片处理 注释规范 注释 注释 注释 一些约定 四、浏览器兼容性  标识区分 实践建议 五、编码规范 语法 声明顺序 不要使用  媒体查询()的位置 命名 代码组织 编辑器配置 六、执行模式 一、规范目的 概述提高团队协作效率便于前端开发以及后期优化维护方便新进的成员快速上手输出高质量的代码本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更新此文档。 目的永远遵循同一套编码规范,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。二、基本准则符合标准,语义化,结构表现行为分离,兼容性优良。代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。开发时需要遵循如上基本准则,特殊情况可以有所宽限,如一些老项目的页面改造。三、文件规范文件命名规则[使用场景:在新建网页、图片、脚本、文件时,根据此规则给文件命名并放入指定位置]文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字空格和特殊字符。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。的命名原则索引文件统一使用文件名。各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如:子页命名关于我们\信息反馈\产品\如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示。每一个目录中应该包含一个缺省的文件,文件名统一用。图片的命名原则图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质。例如:广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名:标志性的图片取名为:在页面上位置不固定并且带有链接的小图片我们取名为在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:装饰用的照片我们取名:不带链接表示标题的图片我们取名:范例:.的命名原则一般使用脚本功能的英文小写缩写命名。例如:广告条的文件名为弹出窗口的文件名为动态语言文件命名原则以性质描述,描述可以有多个单词,用“”隔开,性质一般是该页面得概要。范例:文件存放位置规范文件夹说明存放文件存放图片文件存放文件存放多媒体文件存放脚本存放文件书写规范[使用场景:书写样式时,根据此规则对和进行命名,并遵循书写规则,避免出现常犯错误,提高效率。]基本原则样式可细分为类:重新定义样式、链接状态样式、自定义样式。重新定义样式为设计师重新定义已有的标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。样式名“标签”例:{:}链接状态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。该样式写法有种:(中间无空格)、第一种只能修饰<>标签中;第二种可以修饰所有包含有<>标签的其他标签。样式为设计师自定义的新样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样式名“.”“相应样式效果描述的单词或缩写”例:“”文字样式样式名“”“字号”“行距”“颜色缩写”例:“”、“”“”类型一般出现在文件中,只可选用,不可修改,避免名称含义和实际内容不符。自定义的样式名最好用意义命名。比如:重要的新闻高亮显示(像红色),有两种写法:{};{};很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自定义命名。页面内的样式加载必须用链接方式:<"""""">重新定义的最先,伪类其次,自定义样式最后,便于自己和他人阅读。一般不允许将样式的定义写在标签中(如:“;”);所有装饰性的图片(如背景图),要定义在中;注意细则与命名:大的框架命名比如之类的由设计框架之人统一命名。其他样式名称由小写英文数字来组合命名,避免使用中文拼音,尽量使用简易的单词组合;总之,命名要语义化,简明化。规避与重名,不建议使用选择器。.通过从属写法规避,示例见;.取父级元素命名部分命名,示例见;.重复使用率高的命名,可加代号加下划线起始,比如;.、两条,适用于在中已建好框架的页面,如,要在中已建好框架的页面代码<""><>中加入新的元素,按命名法则:<""><"">...<><>,样式写法:{.......}按命名法则:<""><"">...<><>,