在編寫程式碼中我們要有意識的注意程式碼的規範對團隊協作的重要性

一、編寫HTML的相關規範：

1、建立HTML文件時要使用能夠代表內容語義的標記命名；
例如：（1）相關活動頁面的主體頁（首頁），一般情況是以”index.html”命名或者”home.html”命名；
（2）相關活動頁面的分享頁面及其預熱頁面是以“share.html”與“notice.html”;如果該活動不止一個分 享頁面或者分享頁面有多種展示情況下，在share之前加字首（例如：error_share.html~分享報錯頁面；）；
（3）以簡潔，一目瞭然為目標，根據活動內容所需進行命名；（商品詳情頁面（goods_ detial.html），商品列表頁面（goods_list.html），商品分享頁面（goods_share.html）等等。依據實際模組需要命名~）

2、HTML頁面內相關命名規範：

例如：（01）頁面外圍控制整體區域性寬度 ==》 類名或者id名為wrapper/wrap/相關頁面特殊-wrap；
（02）頁面頭部標題返回及其分享重新整理圖示 ==》類名或者id名為 t-nav/top-header；
（03）頁面頭圖 ==》類名或者id名為banner；
（04）頁面主題內容 ==》類名或者id名為main/content/containe；
（05）頁面尾部 ==》類名或者id名為foot/footer;
（06）頁面尾部下載浮層 ==》類名或者id名為foot-down/down-load/footer-down；
（07）頁面導航 ==》類名或者id名為nav/特殊區域-nav；
（08）頁面返回頂部 ==》類名或者id名為back-top；
（09）頁面相關標題 ==》類名或者id名為title/特殊標題-title；
（10）頁面其他相關區域無關鍵詞時 ==》類名或者id名為 相關內容的漢語拼音命名，以實際情況而定；
（11）本頁面是什麼頁面在各個類名或者id名加字首，防止出現頁面當中類名相同；

3、HTML頁面內相關注意事項和規範：

1)文件型別宣告及編碼:統一為html5宣告型別;編碼統一為,書寫時利用IDE(整合開發環境)實現層次分明的縮排~
2)非特殊情況下樣式檔案必須外鏈至…之間;
非特殊情況下JavaScript檔案必須外鏈至頁面底部
3)引入樣式檔案或JavaScript檔案時,須略去預設型別宣告,寫法如下:



注：根據 HTML5 規範，在引入 CSS 和 JavaScript 檔案時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的預設值。
4)儘可能減少div巢狀；
例如：

改為：
5)在頁面中儘量避免使用style屬性,即style=”…”; 寫在相應的樣式檔案中~
6)用兩個空格來代替製表符（tab） – 這是唯一能保證在所有環境下獲得一致展現的方法；
7)巢狀元素應當縮排一次（即兩個空格）；
8)對於屬性的定義，確保全部使用雙引號，絕不要使用單引號；
9)不要省略可選的結束標籤（closing tag）（例如， 或 ）；
10)不要在自閉和（self-closing）元素的尾部新增斜線。例如，不需要斜線；
11) 必須為含有描述性表單元素(input,textarea)新增label；
例如：

密碼：

改為：

密碼：

12）背景圖片請儘可能使用sprite技術, 減小http請求~
13）給區塊程式碼及重要功能(比如迴圈)加上註釋, 方便後臺新增功能~
14）語義化html,如標題根據重要性用h*(同一頁面只能有一個h1),段落標記用p,列表用ul，內聯元素中不可巢狀塊級元素~
15）不要使用 @import，與 標籤相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導 致不可預料的問題。替代辦法有以下幾種：
a 使用多個 元素
b 通過 Sass 或 Less 類似的 CSS 前處理器將多個 CSS 檔案編譯為一個檔案
c 通過 Rails（是一個更符合實際需要而且更高效的Web開發框架）、Jekyll（是一個生成靜態網頁的工具，不需要資料庫支援，可以繫結自己的域名） 或其他系統中提供過 CSS 檔案合併功能

二、編寫CSS的相關原則：

1、CSS書寫順序；
　1). 顯示屬性：display/list-style/position/float/clear …；
　2). 自身屬性（盒模型）：width/height/margin/padding/border；
　3). 背景：background；
　4). 行高：line-height；
5）文字屬性
color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
6). 其他：cursor/z-index/zoom/overflow；
7). CSS3屬性：transform/transition/animation/box-shadow/border-radius；
8). 如果使用CSS3的屬性，如果有必要加入瀏覽器字首，則按照 -webkit- / -moz- / -ms- / -o- / std的順序進 行新增，標準屬性寫在最後；
9). 連結的樣式請嚴格按照如下順序新增： a:link -> a:visited -> a:hover -> a:active；

2、排版規範：
1). 使用4個空格，而不使用tab或者混用空格+tab作為縮排；
2). 規則可以寫成單行，或者多行，但是整個檔案內的規則排版必須統一；
單行形式書寫風格的排版約束：
a 如果是在html中寫內聯的css，則必須寫成單行；
b 每一條規則的大括號 { 前後加空格 ；
c 屬性名冒號之前不加空格，冒號之後加空格；
d 每一個屬性值後必須新增分號; 並且分號後空格；
e 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ；
多行形式書寫風格的排版約束：
a 每一條規則的大括號 { 前新增空格；
b 多個selector共用一個樣式集，則多個selector必須寫成多行形式；
c 每一條規則結束的大括號 } 必須與規則選擇器的第一個字元對齊；
d 屬性值之後新增分號；

3、規則書寫規範，如下：
1). 使用單引號，不允許使用雙引號；
2). 每個宣告結束都應該帶一個分號，不管是不是最後一個宣告；
3). 除16進位制顏色和字型設定外，CSS檔案中的所有的程式碼都應該小寫；
4). 除了重置瀏覽器預設樣式外，禁止直接為html tag新增css樣式設定；
5). 每一條規則應該確保選擇器唯一，禁止直接為全域性.nav/.header/.body等類設定屬性；

4、命名時需要注意的幾點；
1). 規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或 _； * * *
2). 命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合；
3). 命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則；
4). 不允許通過1、2、3等序號進行命名；避免class與id重名； * * *
5). id用於標識模組或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id；
6). class用於標識某一個型別的物件，命名必須言簡意賅；
7). 儘可能提高程式碼模組的複用，樣式儘量用組合的方式；
8). 規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的資訊。應該用意義命名，而不是樣式顯示結果命名；

5、程式碼效能優化；
1). 合併margin、padding、border的-left/-top/-right/-bottom的設定，儘量使用短名稱；
2). 選擇器應該在滿足功能的基礎上儘量簡短，減少選擇器巢狀，查詢消耗。但是一定要避免覆蓋全域性樣式設定；
3). 注意選擇器的效能，不要使用低效能的選擇器；
4). 禁止在css中使用選擇符； * *
5). 除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag；
6). 0後面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px；
7). 如果是16進製表示顏色，則顏色取值應該大寫；
8). 如果可以，顏色儘量用三位字元表示，例如#AABBCC寫成#ABC；
9). 如果沒有邊框時，不要寫成border:0，應該寫成border:none； * * *
10). 儘量避免使用AlphaImageLoader（濾鏡：對圖片進行透明處理）；
11). 在保持程式碼解耦的前提下，儘量合併重複的樣式；
12). background、font等可以縮寫的屬性，儘量使用縮寫形式；

6、其他規範：
1). 不要輕易改動全站級CSS和通用CSS庫。改動後，要經過全面測試；
2). 避免過小的背景圖片平鋪；
3). 避免使用filter（濾鏡）；
4). 儘量不要在CSS中使用!important；
5). 避免在CSS中使用expression（css表示式，用來把css屬性和JavaScript表示式關聯起來；）；
6). 層級(z-index)必須清晰明確，頁面彈窗、氣泡為最高階（最高階為999），不同彈窗氣泡之間可在三位數之間 調整；普通區塊為10-90內10的倍數；區塊展開、彈出為當前父層級上個位增加，禁止層級間盲目攀比。
7). 背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按照模組、業務、頁面來劃分均可；

7、字型規範：
1). 為了防止檔案合併及編碼轉換時造成問題，建議將樣式中文字型名字改成對應的英文名字，如：黑體(SimHei) 宋 體(SimSun) 微軟雅黑 (Microsoft Yahei），幾個單詞中間有空格組成的必須加引號)； * * *
2). 字型粗細採用具體數值，粗體bold寫為700，正常normal寫為400；
3). font-size必須以px或pt為單位，推薦用px（注：pt為列印版字型大小設定），不允許使用 xx-small/x-small/small/medium/large/x-large/xx-large等值；
4). 為了對font-family取值進行統一，更好的支援各個作業系統上各個瀏覽器的相容性，font-family不允許在業務程式碼中隨意設定；

8、常用命名（多記多查英文單詞）
Page（頁）、wrap、layout（佈局）、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain（次內容）、sidebar/side（側導航）、logo、banner、title(tit)、icon（圖示）、note（註釋）、btn（按鈕）、txt（文字檔案）、tips（溫馨提示）等；