在本節(jié),我們不會(huì)討論適用于大規(guī)模和可維護(hù)的最佳 CSS 命名方案,因?yàn)檫@不僅僅超過(guò)了個(gè)人的能力范圍,也不是一個(gè)Sass樣式指南可以解決的問(wèn)題。我個(gè)人推薦遵從 CSS Guidelines 的建議。
良好的命名對(duì)保持整體代碼的一致性和可讀性非常重要,在 Sass 中可以命名的地方如下:
由于 Sass 占位符遵循和類(lèi)名相同的命名模式,因此被視為常規(guī)的 CSS 選擇器,也就在這個(gè)列表中故意忽略掉了。
就變量、函數(shù)和混合宏的命名而言,我們堅(jiān)持一些很 CSS-y 的風(fēng)格:小寫(xiě)連字符分隔,有意義的命名。
$vertical-rhythm-baseline: 1.5rem;
@mixin size($width, $height: $width) {
// …
}
@function opposite-direction($direction) {
// …
}
如果你恰巧是一個(gè)框架開(kāi)發(fā)者或某個(gè)庫(kù)的維護(hù)者,你會(huì)發(fā)現(xiàn)自己正在使用的變量并不需要在所有情況下都進(jìn)行更新:此時(shí)是多么類(lèi)似一個(gè)常量。不幸的是(或者幸運(yùn)的是?),Sass 不提供任何方式定義這樣的實(shí)體,所以我們要堅(jiān)持嚴(yán)格的命名約定來(lái)闡述我們的想法。
對(duì)于眾多編程語(yǔ)言,我建議使用全大寫(xiě)方式書(shū)寫(xiě)常量。這不僅是一個(gè)由來(lái)已久的編程習(xí)慣,而且可以很好的與小寫(xiě)連字符變量加以區(qū)別。
// Yep
$CSS_POSITIONS: (top, right, bottom, left, center);
// Nope
$css-positions: (top, right, bottom, left, center);
如果你在 Sass 中使用常量,請(qǐng)參考這篇文章:如何在 Sass 中使用常量.
如果你打算分發(fā)你的 Sass 代碼,比如一個(gè)庫(kù)、框架、柵格系統(tǒng)或者其他的什么,為了防止與其他人的代碼發(fā)生沖突,你就可能會(huì)考慮使用命名空間包裹你所有的變量、函數(shù)、混合宏和占位符。
舉例來(lái)說(shuō),如果你參加了一個(gè)名為 Sassy Unicorn 的項(xiàng)目 —— 這意味著你可以向其貢獻(xiàn)代碼,你可能會(huì)考慮使用 su-
作為一個(gè)命名空間。這確實(shí)非常獨(dú)特,既不會(huì)引發(fā)命名沖突,又足夠短小而沒(méi)有書(shū)寫(xiě)困難。
$su-configuration: ( … );
@function su-rainbow($unicorn) {
// …
}
關(guān)于 CSS 的全局命名,Kaelig 寫(xiě)過(guò) 一篇非常具有思考價(jià)值的文章。
需要注意的是,自動(dòng)命名空間功能絕對(duì)是即將到來(lái)的Sass4.0中重構(gòu)的@import
的一個(gè)設(shè)計(jì)目標(biāo)。隨著即將取得結(jié)果,將會(huì)越來(lái)越少的需要手動(dòng)命名,最終,手動(dòng)命名庫(kù)名實(shí)際上會(huì)越來(lái)越難用。