通用約定
通用約定
代碼組織
- 以組件為單位組織代碼段;
- 制定一致的注釋規(guī)范;
組件塊和子組件塊
以及聲明塊
之間使用一空行分隔,子組件塊
之間三空行分隔;- 如果使用了多個(gè) CSS 文件,將其按照組件而非頁(yè)面的形式分拆,因?yàn)轫?yè)面會(huì)被重組,而組件只會(huì)被移動(dòng);
良好的注釋是非常重要的。請(qǐng)留出時(shí)間來描述組件(component)的工作方式、局限性和構(gòu)建它們的方法。不要讓你的團(tuán)隊(duì)其它成員 來猜測(cè)一段不通用或不明顯的代碼的目的。
提示:通過配置編輯器,可以提供快捷鍵來輸出一致認(rèn)可的注釋模式。
/* ========================================================================== 組件塊 ============================================================================ */ /* 子組件塊 ============================================================================ */ .selector { padding: 15px; margin-bottom: 15px; } /* 子組件塊 ============================================================================ */ .selector-secondary { display: block; /* 注釋*/ } .selector-three { display: span; }
Class 和 ID
- 使用語(yǔ)義化、通用的命名方式;
- 使用連字符 - 作為 ID、Class 名稱界定符,不要駝峰命名法和下劃線;
- 避免選擇器嵌套層級(jí)過多,盡量少于 3 級(jí);
- 避免選擇器和 Class、ID 疊加使用;
出于性能考量,在沒有必要的情況下避免元素選擇器疊加 Class、ID 使用。
元素選擇器和 ID、Class 混合使用也違反關(guān)注分離原則。如果HTML標(biāo)簽修改了,就要再去修改 CSS 代碼,不利于后期維護(hù)。
/* Not recommended */ .red {} .box_green {} .page .header .login #username input {} ul#example {} /* Recommended */ #nav {} .box-video {} #username input {} #example {}
聲明塊格式
- 選擇器分組時(shí),保持獨(dú)立的選擇器占用一行;
- 聲明塊的左括號(hào)
{
前添加一個(gè)空格; - 聲明塊的右括號(hào)
}
應(yīng)單獨(dú)成行; - 聲明語(yǔ)句中的
:
后應(yīng)添加一個(gè)空格; - 聲明語(yǔ)句應(yīng)以分號(hào)
;
結(jié)尾; - 一般以逗號(hào)分隔的屬性值,每個(gè)逗號(hào)后應(yīng)添加一個(gè)空格;
rgb()
、rgba()
、hsl()
、hsla()
或rect()
括號(hào)內(nèi)的值,逗號(hào)分隔,但逗號(hào)后不添加一個(gè)空格;- 對(duì)于屬性值或顏色參數(shù),省略小于 1 的小數(shù)前面的 0 (例如,
.5
代替0.5
;-.5px
代替-0.5px
); - 十六進(jìn)制值應(yīng)該全部小寫和盡量簡(jiǎn)寫,例如,
#fff
代替#ffffff
; - 避免為 0 值指定單位,例如,用
margin: 0;
代替margin: 0px;
;
/* Not recommended */ .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF } /* Recommended */ .selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }
聲明順序
相關(guān)屬性應(yīng)為一組,推薦的樣式編寫順序
1.Positioning
2.Box model
3.Typographic
4.Visual
由于定位(positioning)可以從正常的文檔流中移除元素,并且還能覆蓋盒模型(box model)相關(guān)的樣式,因此排在首位。盒模型決定了組件的尺寸和位置,因此排在第二位。
其他屬性只是影響組件的內(nèi)部(inside)或者是不影響前兩組屬性,因此排在后面。
.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box model */ display: block; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 1px solid #e5e5e5; border-radius: 3px; margin: 10px; float: right; overflow: hidden; /* Typographic */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; text-align: center; /* Visual */ background-color: #f5f5f5; color: #fff; opacity: .8; /* Other */ cursor: pointer; }
引號(hào)使用
url()
、屬性選擇符、屬性值使用雙引號(hào)。 參考 Is quoting the value of url() really necessary?
/* Not recommended */ @import url(//www.google.com/css/maia.css); html { font-family: 'open sans', arial, sans-serif; } /* Recommended */ @import url("//www.google.com/css/maia.css"); html { font-family: "open sans", arial, sans-serif; } .selector[type="text"] { }
媒體查詢(Media query)的位置
將媒體查詢放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部。如果你把他們分開了,將來只會(huì)被大家遺忘。
.element { ... } .element-avatar { ... } .element-selected { ... } @media (max-width: 768px) { .element { ...} .element-avatar { ... } .element-selected { ... } }
不要使用 @import
與 <link>
相比,@import
要慢很多,不光增加額外的請(qǐng)求數(shù),還會(huì)導(dǎo)致不可預(yù)料的問題。
替代辦法:
- 使用多個(gè) 元素;
- 通過 Sass 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件;
- 其他 CSS 文件合并工具;
參考 don’t use @import;
鏈接的樣式順序:
a:link -> a:visited -> a:hover -> a:active(LoVeHAte)
無需添加瀏覽器廠商前綴
使用 Autoprefixer 自動(dòng)添加瀏覽器廠商前綴,編寫 CSS 時(shí)不需要添加瀏覽器前綴,直接使用標(biāo)準(zhǔn)的 CSS 編寫。
Autoprefixer 通過 Can I use,按兼容的要求,對(duì)相應(yīng)的 CSS 代碼添加瀏覽器廠商前綴。