堅持制定好的代碼規範。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",