說一說你平時(shí)寫代碼遵守的編碼規(guī)范
- 語法
- 用兩個(gè)空格來代替制表符tab--唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法
- 為選擇器分組時(shí),將單獨(dú)的選擇器單獨(dú)放在一行
- 為了代碼的易讀性,在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格
- 聲明塊的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行
- 每條聲明語句的冒號(hào)后應(yīng)插入一個(gè)空格
- 為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告,每條聲明語句都應(yīng)該獨(dú)占一行
- 所有聲明語句都應(yīng)當(dāng)以分號(hào)結(jié)尾
- 對(duì)于以逗號(hào)分隔的屬性值,每個(gè)逗號(hào)后都應(yīng)該插入一個(gè)空格
- 不要在rgb(),rgba(),hsl(),hsla(),rect()值得內(nèi)部的逗號(hào)后插入空格,這樣利于從多個(gè)屬性值中區(qū)分多個(gè)顏色值
- 對(duì)于屬性值或顏色參數(shù),省略小于1的小數(shù)前面的0(.5代替0.5)
- 十六進(jìn)制值應(yīng)該全部小寫
- 盡量使用簡寫形式的十六進(jìn)制值(#fff代替#ffffff)
- 為選擇器中的屬性添加雙引號(hào)(input[type="text"])
- 屬性值為0不用指定單位
- 聲明順序
相關(guān)的屬性聲明應(yīng)該歸為一組,按下列順序排列:1.Position 2.Box model 3.typographic 4.Visual;由于定位可以從正常的文檔流中移除元素,并且還能覆蓋盒模型相關(guān)的樣式,因此排在首位;盒模型排在第二,因?yàn)樗鼪Q定了組件的尺寸和位置;其他屬性只是影響組件的內(nèi)部,或是不影響前兩組屬性,因此排在后面 - 不要使用
@import
與<link>標(biāo)簽相比,@improt指令要慢很多,不光增加了額外的請(qǐng)求次數(shù),還會(huì)導(dǎo)致不可預(yù)料的問題,替代辦法:
- 使用多個(gè)<link>元素
- 通過Sass或Less類似的CSS預(yù)處理器將多個(gè)CSS文件編譯為一個(gè)文件
- 通過Rails,Jekyll或其他 系統(tǒng)中提供過CSS文件合并功能
- class命名
- class名稱中只能出現(xiàn)小寫字符和破折號(hào)(不是下劃線也不是駝峰命名法);破折號(hào)應(yīng)該用于相關(guān)class的命名
- 避免過度任意的簡寫茂浮。.btn 代表 button，但是 .s 不能表達(dá)任何意思激涤。
- class名稱應(yīng)當(dāng)盡可能短,并且意義明確
- 使用有意義的名稱,使用有組織的或目的明確的名稱,不要使用表現(xiàn)形式的名稱
- 基于最近的父class或基本class作為新class的前綴
- 使用.js-* class 來標(biāo)識(shí)行為（與樣式相對(duì)）衷蜓，并且不要將這些 class 包含到 CSS 文件中累提。
- 選擇器
- 對(duì)于通用元素使用class,這樣利于渲染性能的優(yōu)化
- 對(duì)于經(jīng)常出現(xiàn)的組件,避免使用屬性選擇器;瀏覽器的性能會(huì)受到這些因素的影響
- 選擇器要盡可能短,并且盡量限制組成選擇器的元素個(gè)數(shù),建議不超過3個(gè)
- 只有在必要的時(shí)候才將class限制在最近的父元素內(nèi)(后代選擇器)
垂直居中有幾種實(shí)現(xiàn)方式，給出代碼范例
- 設(shè)置上下padding相等,適用于容器高度不限制的情況代碼
- 絕對(duì)定位,適用于彈窗 代碼
- 當(dāng)彈窗寬高不固定時(shí)絕對(duì)定位法(translate相對(duì)于自身移動(dòng)) 代碼
- vertical-align居中;vertical-align作用于行內(nèi)元素和表格 代碼
- tables-cell實(shí)現(xiàn)居中,改變了display的表現(xiàn)方式代碼
