WEB前端规范.docx

1、WEB前端规范WEB前端规范css注释、书写规范，语法检测工具；js文件命名、代码注释、书写规范；html文件命名、书写要求、注释规范。YFZX_JJL2015/12/3解释权文档摘要文件名 WEB前端规范.docx最新版本1.0文档创建者YFZX_JJL文档维护者文档评审者定稿日期文档目标版本管理版本描述日期作者1.0创建2015-12-04YFZX_JJL 没有一种规范，就像一盘散沙；这种自由，会让自己写的东西时常变化。也很不利于团队协作开发。添加必要的注释，对一个有责任心、有道德模范的前端必须具备的好习惯，可以大大提高代码的可维护性、可读性。1.CSS1.1CSS原理CSS全称为“Cas

2、cading Style Sheets” 层叠样式表。页面的标准“WEB标准”注：X(HTML)用来决定网页的结构和内容。 CSS用来设定网页的表现形式。 JavaScript用来控制网页的行为浏览器是如何渲染页面和加载页面为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：1.浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行。2.在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。3.如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样

3、式），那么此时IE的下载过程会启用单独连接进行下载。4.并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。5.样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。6.JS、CSS中如有重定义，后定义函数将覆盖前定义函数。1.2文件规范 文件夹和文件命名一律全部小写，禁止出现简拼、拼音、数字、无意义的命名，英文单 词尽量使用一个进行描述，简洁易懂；多个单词用中划线分隔。 所有的CSS分为三大类： 1、cores：共用、基础 2、extends：第三方引用 3、modules：项目模块自用 放在如下目录中： 1.3注释

4、规范文件顶部注释（推荐使用）注：“*”空格跟“”，英文半角输出“：”符号加空格录入正文。模块注释注：单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。“*”前后各加一个空格。特殊注释注：用于标注修改信息（update标识修改，这个修改表示修改了他人的CSS样式，如果是修改自己的CSS样式就不需要update进行描述，原先样式保留） 1.4命名规范1.4.1基础命名规则 使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用 通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是 首选；使用通用名称 代表该元素不

5、表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通 用的名称可以更适用于文档或模版变化的情况。 常用命名（多记多查英文单词）：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命名越简短越好，只要足够表达涵义。这样既有助于理解，也能 提高代码效率。 类型选择器避免同

6、时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也 应尽量减少选择器的层级。 命名时需要注意以下几点：规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或“_”，16进制的颜色取值要大写和字体。命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则不允许通过1、2、3等序号进行命名避免class与id重名id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建idclass用于标识某一个类型的对象，命名必须言简意赅。尽可能提高代码模块的复用，样式尽量用组合的方式规则名称中不应该包含颜色（re

7、d/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。1.4.2常用的id命名a)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right centerb)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar菜单：menu子菜单：submenu标题: title摘要: su

8、mmaryc)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright1.4.3常用的class命名1)颜色：使用颜色的名称或者16进制代码，如：2)字体大小，

9、直接使用“font+字体大小”作为名称，如：3)对齐样式，使用对齐目标的英文名称，如：4)标题栏样式，使用“类别+功能”的方式命名，如：1.5书写规范1.5.1排版规范使用4个空格，而不使用tab或者混用空格+tab作为缩进；规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一； 单行形式书写风格的排版约束：如果是在html中写内联的css，则必须写成单行；每一条规则的大括号 前后加空格 ；每一条规则结束的大括号 前加空格；属性名冒号之前不加空格，冒号之后加空格；每一个属性值后必须添加分号; 并且分号后空格；多个selector共用一个样式集，则多个selector必须写成多行形式 ；

10、 多行形式书写风格的排版约束每一条规则的大括号 前添加空格;多个selector共用一个样式集，则多个selector必须写成多行形式 ;每一条规则结束的大括号 前加空格；每一条规则结束的大括号 必须与规则选择器的第一个字符对齐 ;属性名冒号之前不加空格，冒号之后加空格;属性值之后添加分号;1.5.2属性编写顺序1.显示属性：display/list-style/position/float/clear 2.自身属性（盒模型）：width/height/margin/padding/border3.背景：background4.行高：line-height5.文本属性：color/font/t

11、ext-decoration/text-align/text-indent/vertical-align/white-space/content6.其他：cursor/z-index/zoom/overflow7.CSS3属性：transform/transition/animation/box-shadow/border-radius8.如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。9.链接的样式请严格按照如下顺序添加：a:link a:visited a:hover a:ac

12、tive1.5.3规则书写规范使用单引号，不允许使用双引号;每个声明结束都应该带一个分号，不管是不是最后一个声明;除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写;除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置;每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性;1.5.4代码性能优化 关于CSS的优化工作主要从两个方面着手：网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些。语法性能：同样都能实现某些效果，但并不是所有的方式效果都相同，我们看过不少关于JavaScript方面的语法优化知

13、识，其实CSS里面也有一些。1.5.4.1CSS压缩CSS压缩并不是什么高端的姿势，但却很有用，其原理很简单，就是把我们CSS中没用的空白符等删去，达到缩减字符个数的目。我们有这样一段CSS脚本经过压缩后会变成这样当然高级些的压缩工具也会帮我们优化一些语法，提供很多选项，让我们的压缩更有控制，有很多在线版的很方便http:/ganquan.info/yui/?hl=zh-CN （YUI Compressor）（CSS Compressor） （CSS drive） （Clean CSS）1.5.4.2CSS合成我们还可以通过少写CSS属性来达到减少CSS字节的目的，拿个最常见的例子我们可以改写

14、一下上面的CSS，达到同样的效果在CSS中还有很多类似的属性可以合写fontmargin/paddingbackgroundborder注：另外CSS3添加的很多属性如transform、animation相关的都可以合写，不一一列举，大家用的时候要注意1.5.4.3利用继承CSS的继承机制也可以帮我们再一定程度上缩减字节数，我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性，子容器会默认也使用这些属性，因 此如果我们希望全文字体尺寸是14px，大可不必为每个容器设置，只需要在body上设置就可以了。应用这个技巧，把CSS属性在可能的情况下提到父容器 是可以帮我们节省CSS字节的，顺便说一下哪些属性可以继承。所有元素可继承：visibility和cursor