WEB前端规范

WEB前端规范css注释、书写规范，语法检测工具；js文件命名、代码注释、书写规范；html文件命名、书写要求、注释规范。YFZX_JJL2015/12/3WEB前端规范2015/12/031解释权文档摘要文件名WEB前端规范.docx最新版本1.0文档创建者YFZX_JJL文档维护者文档评审者定稿日期文档目标版本管理版本描述日期作者1.0创建2015-12-04YFZX_JJLWEB前端规范2015/12/032目录1.1CSS原理.....................................................................................................................31.2文件规范....................................................................................................................41.3注释规范....................................................................................................................51.4命名规范....................................................................................................................61.4.1基础命名规则....................................................................................................61.4.2常用的id命名...................................................................................................71.4.3常用的class命名...............................................................................................81.5书写规范....................................................................................................................81.5.1排版规范............................................................................................................81.5.2属性编写顺序....................................................................................................91.5.3规则书写规范..................................................................................................101.5.4代码性能优化..................................................................................................101.5.5CSSHack的使用...............................................................................................161.5.6字体规则..........................................................................................................161.6其他规范..................................................................................................................171.7测试规范..................................................................................................................171.7.1了解浏览器特效支持......................................................................................171.7.2设定浏览器支持标准......................................................................................171.7.3常用样式测试工具..........................................................................................182.JSP....................................................................................................................................192.1文件目录..................................................................................................................192.2文件命名..................................................................................................................192.3页面编码规范..........................................................................................................203.JS......................................................................................................................................35WEB前端规范2015/12/033没有一种规范，就像一盘散沙；这种自由，会让自己写的东西时常变化。也很不利于团队协作开发。添加必要的注释，对一个有责任心、有道德模范的前端必须具备的好习惯，可以大大提高代码的可维护性、可读性。1.CSS1.1CSS原理CSS全称为“CascadingStyleSheets”层叠样式表。页面的标准－“WEB标准”注：X(HTML)用来决定网页的结构和内容。CSS用来设定网页的表现形式。JavaScript用来控制网页的行为WEB前端规范2015/12/034浏览器是如何渲染页面和加载页面为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：1.浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行。2.在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。3.如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。4.并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。5.样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。6.JS、CSS中如有重定义，后定义函数将覆盖前定义函数。1.2文件规范文件夹和文件命名一律全部小写，禁止出现简拼、拼音、数字、无意义的命名，英文单词尽量使用一个进行描述，简洁易懂；多个单词用中划线分隔。所有的CSS分为三大类：1、cores：共用、基础2、extends：第三方引用3、modules：项目模块自用放在如下目录中：X(HTML)JSP行内样式表bodystyle=...内部样式表styletype=text/css.../style外部样式表linkrel=stylesheethref=css/cores/style.cssWEB前端规范2015/12/0351.3注释规范文件顶部注释（推荐使用）注：“*”空格跟“@”，英文半角输出“：”符号加空格录入正文。模块注释注：单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。“*”前后各加一个空格。特殊注释注：用于标注修改信息（update标识修改，这个修改表示修改了他人的CSS样式，如果是修改自己的CSS样式就不需要update进行描述，原先样式保留）WEB前端规范2015/12/0361.4命名规范1.4.1基础命名规则使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。命名时需要注意以下几点：规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或“_”，16进制的颜色取值要大写和字体。命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则不允许通过1、2、3等序号进行命名避免class与id重名id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建idclass用于标识某一个类型的对象，命名必须言简意赅。尽可能提高代码模块的复用，样式尽量用组合的方式规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。WEB前端规范2015/12/0371.4.2常用的id命名a)页面结构容器:container页头：header内容：content/container页面主体：main页尾：footer导航：nav