Web前端开发规范(二)

3、HTML代码规范

  • .html文件必须存放在项目工程约定的目录中。
  • .html文件的命名:以模块 + 功能的结合方式来命名,比如:newsList.html
  • 文档类型声明:HTML4中使用<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd”>,但是在HTML5中文档类型的声明方式被简化,直接:<!DOCTYPE html>就可以,同时支持小写<!doctype html>
  • 统一编码方式:在<head>中定义<meta charset="UTF-8">
  • 从网站优化的角度来看,一般情况下,CSS文件必须外链在<head>标签中,Javascript文件必须外链在<body>标签结束之前。
  • 所有标签名以及标签的属性名全部使用小写格式,属性值定义必须加上引号,同时标签必须闭合,这样可以使页面编码风格更加符合W3CWeb标准,同时也有利于SEO
  • 尽可能使用语义化的HTML标签,这样可以减少页面代码量,同样可以更好的有利于SEO
  • 在保证页面弹性的基础上尽量减少<div>的嵌套层数。
  • 引入页面中的Javascript库文件,文件名称要让所有开发者能清楚知道库名称、版本号、是否压缩,比如:jquery-1.7.1.min.js。引入的第三方插件库的Javascript文件名称同样也需要让开发者能清楚知道库名称和插件名称,比如:jquery.cookie.js
  • 标签中的URL定义是,需要避免重定向,需要在URL地址后面加上”/”,同时为了有利于SEO,请尽量使用绝对URL而非是相对URL,比如:href=”http://www.baidu.com/
  • 所有标签的样式定义时,一般情况下存放在对应的CSS文件中定义,尽量避免使用style属性来定义当前标签的样式属性。
  • 对于<img>标签定义的图片,为了有利于SEO和爬虫的抓取,尽量给每一张图片定义alt属性。
  • 对于HTML中重要的区域模块和重要的功能部分,必须加上必要的注释,便于后期其他成员对代码进行维护。
  • 页面中如果需要使用特殊符号的时候,请使用特殊符号的转义代码替代。
  • 避免使用已经被淘汰掉的标签和属性,多使用HTML5新增加的各种语义化标签和新增属性(附录A中给出了移动网页的基本结构)。

4、CSS代码规范

  • .css文件必须存放在项目工程约定的目录中,同时建议对.css文件使用UTF-8的编码方式。
  • 将网站中的所有CSS样式按照特定的方式进行组织,此处建议使用:基本样式(base.css + 通用样式(common.css + 页面样式(XXXpage.css)。
  1. 基本样式:最底层的样式定义,提供CSS reset 和粒度最小的通用样式定义。基本样式是会被所有页面引用,所以这里面的样式定义要力求精简和通用。当网站成熟的时候,基本样式是相对比较稳定的,基本上不需要进行维护。(附录B中给出了推荐的基本样式,请参照。)
  2. 通用样式:提供组件级别的样式定义,这些组件可以高度重用的。
  3. 页面样式:提供页面级别的样式定义。
  • 对标签进行样式定义时,可以选用标签的id或者class名称,但是一般情况下 class,特殊情况除外,因为id的优先级远比class要高的多。
  • CSS的样式命名规范:命名时尽量使用英文,避免使用汉语拼音。命名方式有驼峰命名法和划线命名法两种。使用这两种方法都可以将单词区分开,提高命名的可读性,但是这两种方法都不是最好的方式,建议在实际开发过程中,组合使用这两种方式。
  1. 驼峰命名法:从第二个单词开始,每个单词的首字母大写,如:dropMenusubNavMenu
  2. 划线命名法:将每个单词用“-”或者“_”分隔,如:drop-menusub-nav-menudrop_menusub_nav_menu
  • 在定义样式属性的时候,建议按照一定的顺序进行排列,建议按照:布局定位属性→自身属性→文本属性→其他属性。当然,这个顺序不是硬性规定,各位开发人员可以根据自己的习惯调整这个顺序,但是,要保证同类属性是要在一起的,这样便于阅读和维护。
  1. 布局定位属性:displaypositionfloatclearvisibility等。
  2. 自身属性:widthheightmarginpaddingborder等。
  3. 文本属性:fontline-heighttext-alignvertical-align等。
  4. 其他属性:colorbackground等。
  • 避免滥用自选择器,.hello div {}.hello .divclass {}这两种方式尽量使用后者。采用继承的属性还是新加自定义class根据页面代码中的不同情况灵活使用。新加自定义的class便于后期进行维护。
  • 兼容性属性的使用,尤其是CSS3的相关属性,在使用时,切记针对一些浏览器有不同的定义方式。
  • 尽量避免影响页面性能的属性使用,比如:position:absolutefloat等。
  • CSS文件中,也必须有相关的注释。
  • CSS文件中,代码的缩进方式团队要基本保持统一。

5、Javascript代码规范

  • .js文件必须存放在项目工程约定的目录中,同时建议对.js文件使用UTF-8的编码方式。
  • 代码书写过程中,要求每行代码结束都必须有”;”
  • 原则上项目工程统一引入一个Javascript的库,比如jQuery的库,如果需要引起其他库文件或者第三方插件库,需要经过团队成员一致讨论决定。
  • Javascript中的文件名、类名、函数方法名、变量名等的命名尽量语义化,做到见名知其意。
  • 代码结构需要明了,有必要的代码注释,尽量提高代码的重用率。
  • 要注重Javascript代码和HTML代码的分离,减小reflow,注重页面的性能。

6、图片规范

  • 所有页面元素使用的图片文件均要放入指定的文件夹中。
  • 图片的格式不要繁杂,仅限于gifpngjpg
  • 图片的命名使用英文、数字加上_的组合。图片名称中不要出现汉字、空格、特殊字符等。对于图片的名称也要做到见名知其意。
  • 在保证视觉效果的基础上要尽量选择最小的图片格式和质量,减少页面加载时间和网络流量。
  • 移动页面列表图片,请使用图片延迟加载技术,初次加载只加载当前屏幕范围内的图片,滚动平时时,再按需加载图片。
  • 针对不同的屏幕尺寸、不同的手机系统选择不同的图片加载,请使用响应式Web设计中对图片的具体处理方法。

7、注释规范

  • HTML注释:<!—注释内容 –>
  • CSS注释:/* 注释内容 */
  • Javascript注释:// 单行注释内容、/* 多行注释内容 */

8、其他说明

本文档中所列出的规范只是基本的开发标准,也参杂了一些本人的使用习惯,所以不是硬性强制的要求。正因为有很多是本人的个人习惯,所以难免有遗漏和失误之处,请各位阅读者不吝赐教。

同时,本文档的基本规范适用于所有的前端开发过程中,移动网页的前端开发同样适用。而针对移动网页开发的一些特别之处,后续我将通过组件Demo和页面Demo的形式,给出关于移动网页开发过程中的一些注意点和特点。

你可能感兴趣的:(web前端开发)