Web前端开发规范_第1页
Web前端开发规范_第2页
Web前端开发规范_第3页
Web前端开发规范_第4页
Web前端开发规范_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、南京业禾网络科技有限公司 内部文档·注意保密Web前端开发规范 规范目的为输出高质量的Web页面，提高团队协作效率，便于后台人员添加功能及前端后期优化与维护，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台Web页面开发。文档中如有错误或不当之处，由前端开发人员提出，经开发小组讨论决定后方可更改。基本准则符合W3C（万维网联盟）定义的Web标准，包括结构标准HTML、表现语言标准CSS、行为标准DOM和ECMAScript，必须通过W3C的HTML和CSS标准验证，网址为：MarkUp Validator: http:/vali

2、/CSS Validator: /css-validator/总体要求为：语义化HTML，结构表现与行为分离，浏览器兼容性优良，代码简洁明了有序，性能上尽可能减小服务器负载，保证最快的解析速度。黄金定律不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。尽量遵循标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签和元素并保持最小的复杂度。文件规范1、html，css，js，images,fonts等文件目录组织如下如示： xxx.html css/ xxx.css xxx.min.css ima

3、ges/ xxx.jpg xxx.png js/ xxx.js xxx.min.js images/ xxx.jpg xxx.png fonts/ xxx.ttf文件命名原则调整为所有字母小写，单词之间使用破折号（-）相连，压缩后的文件在原文件名（除扩展名）后添加.min。参考bootstrap文件命名：bootstrap-theme.css, bootstrap-theme.min.css。HTML书写规范语法l 用两个空格来代替制表符（tab） - 这是唯一能保证在所有环境下获得一致展现的方法。l 嵌套元素应当缩进一次（即两个空格）。l 对于属性的定义，确保全部使用双引号，绝不要使用单引号

4、。l 不要在自闭和（self-closing）元素的尾部添加斜线 - HTML5 规范中明确说明这是可选的。l 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。<!DOCTYPE html><html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Co

5、mpany"> <h1 class="hello-world">Hello, world!</h1> </body></html>HTML5 doctype为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。<!DOCTYPE html><html> <head> </head></html>语言属性根据 HTML5 规范：强烈建议为 html 根元素指定 lang 属性，从而为文档

6、设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。<html lang="en-us"> <!- . -></html>中文使用zh，中文简体为zh-cn。IE 兼容模式IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。<meta http-equiv="X-UA-Compatible" content=&qu

7、ot;IE=Edge">字符编码通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。<head> <meta charset="UTF-8"></head>引入 CSS 和 JavaScript 文件根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type属性，因为 text/css 和&

8、#160;text/javascript 分别是它们的默认值。<!- External CSS -><link rel="stylesheet" href="code-guide.css"><!- In-document CSS -><style> /* . */</style><!- JavaScript -><script src="code-guide.js"></script>属性顺序HTML 属性应当按照以下给出的顺序依

9、次排列，确保代码的易读性。l classl id, namel data-*l src, for, type, hrefl title, altl aria-*, roleclass 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。<a class="." id="." data-modal="toggle" href="#"> Example link</a>&

10、lt;input class="form-control" type="text"><img src="." alt=".">布尔（boolean）型属性布尔型属性可以在声明时不赋值。<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" se

11、lected>1</option></select>减少标签的数量编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。<!- Not so great -><span class="avatar"> <img src="."></span><!- Better -><img class="avatar" src=".">JavaScript 生成的标签通过 JavaScript 生成的标

12、签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。其他要求l css文件外链至<head></head>之间，js文件置于</body>之前。l 语义化HTML，如标题根据重要性用h*(同一页面只能有一个h1)，段落标记用p，列表用ul，内联元素中避免嵌套块级元素。l 书写链接地址时，建议在URL地址后面加上"/"，例如：href="http:/proin.cc/"。l 在页面中不能使用style属性，即style=""；所有样式必须写在css文件中。l 必须为含有描述性表单元素(inpu

13、t，textarea)添加label，如：<p>姓名:<input type="text" id="name" name="name" /></p>须写成：<p><label for="name">姓名：</label><input type="text" id="name" /></p>l 能以背景形式呈现的图片，尽量写入css样式中。l 给重要的元素和截断的元素加上title。

14、l 建议给区块代码及重要功能（比如循环）加上注释，方便后台添加功能。l 不是标签一部分的特殊符号都用编码表示，出现在内容中的特殊符号都需要用编码形式表现出来，如：<：&lt，>：&gt，&）：&amp，"：&quot;，尽量使用&nbsp;代替空格。l 图片标签必须要有alt属性，如只起修饰作用而没有任何意义的图片可设置alt属性值为空。如：<img src="a.gif" alt="">。CSS书写规范语法l 使用两个空格的 soft tabs 这是保证代码在各种环境下显

15、示一致的唯一方式。l 使用组合选择器时，保持每个独立的选择器占用一行。l 为了代码的易读性，在每个声明的左括号前增加一个空格。l 声明块的右括号应该另起一行。l 每条声明 : 后应该插入一个空格。l 每条声明应该只占用一行来保证错误报告更加准确。l 所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。l 逗号分隔的取值，都应该在逗号之后增加一个空格。l 不要在颜色值 rgb() 和 rgba() 中增加空格，并且不要带有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。l 所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多

16、样的外形，在浏览文档时，他们能够更轻松的被区分开来。l 尽可能使用短的十六进制数值，例如使用 #fff 替代#ffffff。l 为选择器中得属性取值添加引号，例如inputtype="text"。 他们只在某些情况下可有可无，所以都使用引号可以增加一致性。l 不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;。l 对这里提到的规则可参考 Wikipedia 中的 CSS 语法部分。/* Bad CSS */.selector, .selector-secondary, .selectortype=text padding:15px; ma

17、rgin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF/* Good CSS */.selector,.selector-secondary,.selectortype="text" padding: 15px; margin: 0 0 15px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;声明顺序相关的属

18、性声明应该以下面的顺序分组处理：l Positioning 定位l Box model 盒模型l Typographic 排版l Visual 外观Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。关于完整的属性以及他们的顺序，请参考 Recess。.declaration-order /* Positioning */ position: absolute; top: 0; right: 0; bottom:

19、0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border

20、-radius: 3px; /* Misc */ opacity: 1;媒体查询位置尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。.element . .element-avatar . .element-selected . media (min-width: 480px) .element . .element-avatar . .element-selected . 不要使用 import与 <link> 相比, import 更慢，需要额外的页面请求，并且可能引

21、发其他的意想不到的问题。应该避免使用他们，选择其他的方案：使用多个 <link> 元素使用 CSS 预处理器例如 Sass 或 Less 将样式编译到一个文件中使用 Rails, Jekyll, 或者其他环境提供的功能，来合并你的 CSS 文件。<!- Use link elements -><link rel="stylesheet" href="core.css"><!- Avoid imports -><style> import url("more.css");<

22、;/style>前缀属性当使用特定厂商的带有前缀的属性时，通过缩进使取值垂直对齐以便多行编辑。在 Sublime Text 2 中， 使用 Selection Add Previous Line () 和Selection Add Next Line ()。/* Prefixed properties */.selector -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);单条声明的声明块在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行

23、。所有包含多条声明的声明块应该分为多行。这样做的关键因素是错误检测 - 例如，一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行，那就是他了。在多个声明的情况下，你必须为哪里出错了费下脑子。/* Single declarations on one line */.span1 width: 60px; .span2 width: 140px; .span3 width: 220px; /* Multiple declarations, one per line */.sprite display: inline-block; width: 16px; height

24、: 15px; background-image: url(./img/sprite.png);.icon background-position: 0 0; .icon-home background-position: 0 -20px; .icon-account background-position: 0 -40px; 属性简写坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:l paddingl marginl fontl backgroundl borderl border-radius大多数情况下，我们并不需要设置属性简写中包含的所有值。例如

25、，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。/* Bad example */.element margin: 0 0 10px; background: red; background: url("image.jpg"); border-radius: 3px 3px 0 0;/* Good example */.element margin-bottom: 10px; background-color: red; background-image: url(&q

26、uot;image.jpg"); border-top-left-radius: 3px; border-top-right-radius: 3px;LESS 和 SASS 中的嵌套避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。/ Without nesting.table > thead > tr > th .table > thead > tr > td / With nesting.table > thead > tr > th > td 代码注

27、释代码是由人来编写和维护的。保证你的代码是描述性的，包含好的注释，并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。/* Bad example */* Modal header */.modal-header ./* Good example */* Wrapping element for .modal-title and .modal-close */.modal-header .Class和Id 命名l class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空

28、间）（例如，.btn 和 .btn-danger）。l Id 名称中只能出现小写字符和下划线（underline）。l 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。l 名称应当尽可能短，并且意义明确。l 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。l 基于最近的父 class 或基本（base） class 作为新 class 的前缀。l 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。/* Bad example */.t . .red . .header . /* Good example */.tweet . .important . .tweet-header . 选择器l 使用 classes 而不是通用元素标签来优化渲染性能。l 建议避免使用在经常出现的组件中

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论