坚持制定好的代码规范。javascript
不管团队人数多少，代码应该同出一门。css
所有采用小写方式， 如下划线分隔。html
例：my_project_namehtml5
参照项目命名规则；java
有复数结构时，要采用复数命名法。node
例：scripts, styles, images, data_modelsgit
参照项目命名规则。github
例：account_model.jsweb
参照项目命名规则。express
例：error_report.html
</li> 和</body>。在页面开头使用这个简单地doctype来启用标准模式，使其在每一个浏览器中尽量一致的展示；
虽然doctype不区分大小写，可是按照惯例，doctype大写
<!DOCTYPE html>
根据HTML5规范：
应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里；
在sitepoint上能够查到语言列表；
但sitepoint只是给出了语言的大类，例如中文只给出了zh，可是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表，其中细分了zh-cn, zh-hk, zh-tw。
<!DOCTYPE html> <html lang="en-us"> ... </html> 经过声明一个明确的字符编码，让浏览器轻松、快速的肯定适合网页内容的渲染方式，一般指定为'UTF-8'。
用 <meta> 标签能够指定页面应该用什么版本的IE来渲染；不一样doctype在不一样浏览器下会触发不一样的渲染模式（这篇文章总结的很到位）。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 根据HTML5规范, 一般在引入CSS和JS时不须要指明type，由于 text/css 和 text/javascript 分别是他们的默认值。
<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> 属性应该按照特定的顺序出现以保证易读性；
classidnamedata-*src, for, type, href, value , max-length, max,min, patternplaceholder, title, altaria-*, rolerequired, readonly, disabledclass是为高可复用组件设计的，因此应处在第一位；
id更加具体且应该尽可能少使用，因此将它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="..."> boolean属性指不须要声明取值的属性，XHTML须要每一个属性声明取值，可是HTML5并不须要；
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select> 在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽可能避免这种状况的出现。
在编写HTML代码时，须要尽可能避免多余的父节点；
不少时候，须要经过迭代和重构来使HTML变得更少。
<!-- Not well --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="..."> 尽可能遵循HTML标准和语义，可是不该该以浪费实用性做为代价；
任什么时候候都要用尽可能小的复杂度和尽可能少的标签来解决问题。
使用soft tab（4个空格）。
.element { position: absolute; top: 10px; left: 10px; border-radius: 10px; width: 50px; height: 50px; } 每一个属性声明末尾都要加分号。
.element { width: 20px; height: 20px; background-color: red; } 如下几种状况不须要空格：
!important '!'后如下几种状况须要空格：
!important '!'前@else 先后注释'/*'后和'*/'前
/* not good */ .element { color :red! important; background-color: rgba(0,0,0,.5); } /* good */ .element { color: red !important; background-color: rgba(0, 0, 0, .5); } /* not good */ .element , .dialog{ ... } /* good */ .element, .dialog { } /* not good */ .element>.dialog{ ... } /* good */ .element > .dialog{ ... } /* not good */ .element{ ... } /* good */ .element { ... } /* not good */ @if{ ... }@else{ ... } /* good */ @if { ... } @else { ... }
如下几种状况须要空行：
/* not good */ .element { ... } .dialog { color: red; &:after { ... } } /* good */ .element { ... } .dialog { color: red; &:after { ... } }
如下几种状况不须要换行：
如下几种状况须要换行：
/* not good */ .element {color: red; background-color: black;} /* good */ .element { color: red; background-color: black; } /* not good */ .element, .dialog { ... } /* good */ .element, .dialog { ... }
注释统一用'/* */'（scss中也不要用'//'），具体参照右边的写法；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
/* Modal header */ .modal-header { ... } /* * Modal header */ .modal-header { ... } .modal-header { /* 50px */ width: 50px; color: red; /* color red */ } 最外层统一使用双引号；
url的内容要用引号；
属性选择器中的属性值须要引号。
.element:after { content: ""; background-image: url("logo.png"); } li[data-type="single"] { ... } /* class */ .element-content { ... } /* id */ #myDialog { ... } /* 变量 */ $colorBlack: #000; /* 函数 */ @function pxToRem($px) { ... } /* 混合 */ @mixin centerBlock { ... } /* placeholder */ %myDialog { ... }
相关的属性声明按下边的顺序作分组处理，组之间须要有一个空行。
// 下面是推荐的属性的顺序 [ [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "-webkit-box-orient", "-webkit-box-direction", "-webkit-box-decoration-break", "-webkit-box-pack", "-webkit-box-align", "-webkit-box-flex" ], [ "position", "top", "right", "bottom", "left", "z-index" ], [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "-webkit-border-radius", "-moz-border-radius", "border-radius", "-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius", "-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius", "-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius", "-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", "border-image", "-webkit-border-image-source", "-moz-border-image-source", "-o-border-image-source", "border-image-source", "-webkit-border-image-slice", "-moz-border-image-slice", "-o-border-image-slice", "border-image-slice", "-webkit-border-image-width", "-moz-border-image-width", "-o-border-image-width", "border-image-width", "-webkit-border-image-outset", "-moz-border-image-outset", "-o-border-image-outset", "border-image-outset", "-webkit-border-image-repeat", "-moz-border-image-repeat", "-o-border-image-repeat", "border-image-repeat", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "width", "min-width", "max-width", "height", "min-height", "max-height" ], [ "font", "font-family", "font-size", "font-weight", "font-style", "font-variant", "font-size-adjust",