規(guī)范說明
此為前端開發(fā)團隊遵循和約定的代碼書寫規(guī)范，意在提高代碼的規(guī)范性和可維護性。
基本準則
符合web標準, 語義化html, 結(jié)構(gòu)表現(xiàn)行為分離, 兼容性優(yōu)良. 頁面性能方面, 代碼要求簡潔明了有序, 盡可能的減小服務器負載, 保證最快的解析速度。
總規(guī)范
1.忽略（Omit）協(xié)議：如 background: url(http://www.google.com/images/example); 應該寫background: url(//www.google.com/images/example);以方便http與https協(xié)議切換，除非必須使用某個協(xié)議
2.書寫時利用IDE實現(xiàn)層次分明的縮進。tab鍵用四個空格代替。
因為在不同系統(tǒng)的編輯工具對tab解析不一樣，windows下的tab鍵是占四個空格的位置，而在linux下會變成占八個空格的位置（除非你自己設定了tab鍵所占的位置長度）。
如sublime text，在這個工具中可以對tab鍵進行設置。
3.標簽屬性使用小寫
4.尾部不要留有空格，以防diff
5.使用 UTF-8 (no BOM)，文檔中也加入 <meta charset=”utf-8″>
6.文件命名統(tǒng)一使用小寫”.js”，同時推薦”-”而不是”_”
7.TODO(contact) 以及TODO: action item，不要使用@@
HTML 細化規(guī)范
1.使用html5的規(guī)范<!DOCTYPE html>
2.<img>標簽默認缺省格式：<img src="xxx.png" alt="缺省時文字" /> 避免出現(xiàn)src="" 問題
3.<a>標簽缺省格式：<a href="###" title="鏈接名稱">xxx</> 注：target="_blank" 根據(jù)需求決定
4.<a>標簽預留鏈接占位符使用###，參見：a標簽占位符問題
5.書寫鏈接地址時, 必須避免重定向，例如：href=”http://itaolun.com/”, 即須在URL地址后面加上“/”
6.所有標簽需要符合XHTML標準閉合
7.一律統(tǒng)一標簽結(jié)尾斜杠的書寫形式：<br /> <hr /> 注意之間空格
8.避免使用已過時標簽，如：<b> <u> <i> 而用 <strong> <em>等代替
9.使用data-xxx來添加自定義數(shù)據(jù)，如：<input data-xxx="yyy"/>
10.避免使用style="xxx:xxx;"的內(nèi)聯(lián)樣式表
特殊符號使用參考HTML 符號實體
11.必須為含有描述性表單元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>須寫成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
CSS 細化規(guī)范
1. 每個樣式屬性后加 ";"
方便壓縮工具"斷句"。
2. Class命名，采用” - “[減號連接符] 對class中的字母分隔：
用"-"隔開比使用駝峰是更加清晰。
產(chǎn)品線-產(chǎn)品-模塊-子模塊，命名的時候也可以使用這種方式
ID: 小駝峰式命名法 如：
firstName topBoxList footerCopyright
3. 空格的使用，以下規(guī)則執(zhí)行：
.hotel-content {
font-weight: bold;
}
選擇器與 { 之前要有空格
屬性名的 : 后要有空格
屬性名的 : 前（禁止）加空格
一個原因是美觀，其次IE 6存在一個bug， 戳bug
4. （推薦）屬性的書寫順序, 舉個例子:
.hotel-content {
/* 定位 */
display: block;
position: absolute;
left: 0;
top: 0;
/* 盒模型 */
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ *其他* /
color: #efefef;
}
定位相關, 常見的有：display position left top float 等
盒模型相關, 常見的有：width height margin padding border 等
其他屬性
按照這樣的順序書寫可見提升瀏覽器渲染dom的性能
簡單舉個例子，網(wǎng)頁中的圖片，如果沒有設置width和height，在圖片載入之前，他所占的空間為0，但是當他加載完畢之后，那塊為0的空間突然被撐開了，這樣會導致，他下面的元素重新排列和渲染，造成重繪（repaint）和回流（reflow）。我們在寫css的時候，把元素的定位放在前頭，首先讓瀏覽器知道該元素是在文本流內(nèi)還是外，具體在頁面的哪個部位，接著讓瀏覽器知道他們的寬度和高度，border等這些占用空間的屬性，其他的屬性都是在這個固定的區(qū)域內(nèi)渲染的，差不多就是這個意思吧~
推薦文章：
Poll Results: How do you order your CSS properties?
http://www.mozilla.org/css/base/content.css
5. （推薦）當編寫針對特定html結(jié)構(gòu)的樣式時，使用元素名 + 類名
/* 所有的nav都是針對ul編寫的 */
ul.nav {
......
}