語義化
- 優(yōu)先使用語義化標(biāo)簽
- 基于功能命名灭翔、基于內(nèi)容命名魏烫、基于表現(xiàn)命名
- 命名
- 所有命名都采用小寫
- 命名用引號(hào)包裹
- 用中橫線連接
- 名稱體現(xiàn)功能，而不是表現(xiàn)樣式，如：顏色则奥、背景等
HTML規(guī)范
- 用兩個(gè)空格代表一個(gè)制表符考润，保證在所有環(huán)境下表現(xiàn)一致，嵌套元素應(yīng)當(dāng)用四個(gè)空格進(jìn)行縮進(jìn)
- 使用雙引號(hào)對(duì)屬性進(jìn)行定義
- 不要給自閉合標(biāo)簽添加斜線
- 為HTML文檔添加標(biāo)準(zhǔn)模式的聲明
- 通過meta標(biāo)簽確定繪制頁面所采用的IE版本
- 為避免亂碼读处，聲明文檔的字符編碼糊治，一般是utf-8
- 引入css文件和js文件時(shí)不需要聲明type屬性，默認(rèn)值即是它們自己
- 盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度
- 聲明屬性時(shí)的順序?yàn)閏lass罚舱、id\name井辜、src\for\type\href\value、title\alt
CSS規(guī)范
字符編碼格式采用“utf-8”管闷，與HTML文檔保持一致
tab 用兩個(gè)空格代替
: 后加個(gè)空格粥脚， { 前加個(gè)空格
每條聲明后都加上分號(hào)
選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行包个，而不是放到一行
為了獲得準(zhǔn)確的報(bào)錯(cuò)刷允，應(yīng)該將每條聲明占據(jù)一行
避免為0值指定單位
顏色用小寫，用縮寫, #fff
小數(shù)不用寫前綴, 0.5s -> .5s碧囊；0不用加單位
盡量縮寫树灶， 如：padding: 5px 10px 5px 10px -> margin: 5px 10px
聲明順序應(yīng)該是position/ box model/ typographic/ visual
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關(guān)的樣式糯而，因此排在首位天通。盒模型排在第二位，因?yàn)樗鼪Q定了組件的尺寸和位置熄驼。其他屬性只是影響組件的內(nèi)部（inside）或者是不影響前兩組屬性像寒，因此排在后面。完整參考-
不要使用@import
與 <link> 標(biāo)簽相比瓜贾，@import 指令要慢很多诺祸，不光增加了額外的請(qǐng)求次數(shù)，還會(huì)導(dǎo)致不可預(yù)料的問題祭芦。替代辦法有以下幾種：- 使用多個(gè) <link> 元素
- 通過 Sass 或 Less 類似的 CSS 預(yù)處理器
將多個(gè) CSS 文件編譯為一個(gè)文件 - 通過 Rails序臂、Jekyll 或其他系統(tǒng)中提供過
CSS 文件合并功能
【參考資料-Bootstrap中文網(wǎng)】
【參考資料-Google HTML CSS編碼規(guī)范】
【參考資料-命名這貨真難】
【參考資料-百度】
