缩进
对于所有编程语言,我们要求缩进必须是软tab(用空格字符)。在你的文本编辑器里敲 Tab 应该等于 4个空格 。
可读性 vs 压缩
对于维护现有文件,我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS,也不必把Javascript代码最小化得面目全非。
我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件,例如CSS和JS
HTML,CSS,JS代码分离
html代码尽量保持整洁,采用最简单的代码层级完成复杂的布局要求,方便以后的维护和扩展
css代码本身都是全局的,所有应当采用css模块化思想,约束css的规则,尽量减少对全局的污染
JS代码分为功能代码和业务代码,功能代码尽量抽取成功能组件,方便团队内其他同事的使用
命名规范
文件及文件夹: 全部英文小写字母+数字或连接符"- , _ ",不可出现其他字符 如:jquery.1.x.x.js
文件:调用 /libs 文件需包含版本号,压缩文件需包含min关键词,其他插件则可不包含 如:/libs/modernizr-1.7.min.js
ID: 小駝峰式命名法 如:firstName topBoxList footerCopyright
Class: [减号连接符] 如:top-item main-box box-list-item-1
尽量使用语义明确的单词命名,避免 left bottom 等方位性的单独的词语命名样式
在属性上,使用双引号,不要使用单引号。
不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。
不要忽略可选的关闭标签(例如, 和 )。
尽量用class来渲染样式,避免用id来写样式
在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。
<!DOCTYPE html>
通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后,需要避免在 HTML 中出现字符实体,直接提供字符与文档一致的编码(通常是 UTF-8)。
<head> <meta charset="UTF-8"></head>
Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要,通常通过 edge mode 来通知 IE 使用最新的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。
<link rel="stylesheet" href="code-guide.css"><script src="code-guide.js"></script><style> /* ... */</style>
尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。在编写 HTML 代码时,需要尽量避免多余的父节点。很多时候,需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:
<!-- Not so great --><span class="avatar"> <img src="..." alt="新公司的前端开发规范(初稿)_html/css_WEB-ITnose" ></span><!-- Better --><img class="avatar" src="..." alt="新公司的前端开发规范(初稿)_html/css_WEB-ITnose" >
用 document.write生成标签让内容变得更难查找,更难编辑,<b>性能更差</b>。应该尽量避免这种情况的出现。
坚持限制属性取值简写的使用,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:paddingmarginfontbackgroundborderborder-radius大多数情况下,我们并不需要设置属性简写中包含的所有值。例如,HTML 头部只设置上下的 margin,所以如果需要,只设置这两个值。过度使用属性简写往往会导致更混乱的代码,其中包含不必要的重写和意想不到的副作用。
css实例都是用的多行的格式,每一对属性和值占单独一行。这个是广泛使用的约定,不仅是在css文件中,也多出现在书里和文章里。许多人认为他的可读性很好。然而在和团队的工作中,尤其是大型的css文件,我是将样式写成一行,并使用css模块化思想:
.alert-window {background: #fff; border: 1px solid #ff0; font-weight: bold; padding: 10px;}.alert-window .window-title{...}.alert-window .window-content{...}.alert-window .window-buttom{...}
就我个人而言,觉得单行的可读性更好。当你查找css时多行样式就变得很麻烦,相比较而言单行查找更容易。
'1'+1==2 //false; 1+1==2 //true
if (name !== 0 || name !== '' || name!==null || name!==undefined) {...}if (name) {...}if (collection.length > 0) { ...}if (collection.length) {...}
if(a){ d='b' }else{ d='c' } d=a?'b':'c';
if(a){ b() } a && c(); if(bb){ a=bb }else{ a=2 } a=bb||2
if(a=='1' || a=='b' || a=='c' || a=='ss'){ bb(); }else{ ... } var hasData={ '1':1, 'b':1, 'c':1, 'ss':1 } if(hasData[a]){ bb() }else{ ... }
尽管浏览器允许你分配函数给一个变量,但坏消息是,不同的浏览器用不同的方式解析它如果一定要定义函数,请用函数表达式方式声明;如:
function b(){ ... } if(a){ function b(){ ... } } var b=function(){ ... } if(a){ b=function(){ .... } }
if(a) b() else c(); if(a){ b(); }else{ c(); }
这会在IE6、IE7和IE9的怪异模式中导致一些问题;同时,在ES3的一些实现中,多余的逗号会增加数组的长度。在ES5中已经澄清
var hero = { firstName: 'Kevin', lastName: 'Flynn', }; var heroes = [ 'Batman', 'Superman', ]; var hero = { firstName: 'Kevin', lastName: 'Flynn' }; var heroes = [ 'Batman', 'Superman' ];
在分配低调(unobtrusive)的事件监听器时,通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过,偶尔也会有多个元素同时符合触发条件,给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下,你就应该改用事件代理了