簡(jiǎn)而言之，本文主要包括以下幾個(gè)方面的內(nèi)容:
核心原則
- 創(chuàng)建編程規(guī)范的目的就是為了保證協(xié)作開(kāi)發(fā)的一致性。即使你對(duì)本文有不同的意見(jiàn)，也要保證整體開(kāi)發(fā)的一致性。?
- 盡可能讓 Sass 代碼保持簡(jiǎn)潔。除非是絕對(duì)需要，否則絕沒(méi)有必要構(gòu)建復(fù)雜的系統(tǒng)。?
- 請(qǐng)記住，有時(shí)候保持簡(jiǎn)潔（KISS，Keep It Simple, Stupid）比減少重復(fù)（Don't Repeat Yourself）更重要。?
語(yǔ)法 & 格式
- 使用兩個(gè)空格代表縮進(jìn)，而不是使用tab鍵。?
- 理想上，每行保持為 80 個(gè)字符寬度。?
- 根據(jù) CSS Guidelines 正確書寫 CSS 屬性。?
- 有意義的使用空格。?
字符串
- 強(qiáng)烈建議在樣式表頂部使用
@charset 指令聲明字符集。?
- 除非用作 CSS 標(biāo)識(shí)符，否則應(yīng)該使用單引號(hào)包裹字符串和 URL。?
數(shù)值
- 數(shù)字尾部不使用 0 ，并且強(qiáng)制在小于 1 的數(shù)字前使用 0。?
- 長(zhǎng)度樣式屬性值為 0 時(shí)不要添加單位。?
- 使用括號(hào)包裹運(yùn)算表達(dá)式。?
- 不使用幻數(shù)。?
顏色
- 顏色表示法的先后順序：關(guān)鍵字 > HSL > RGB > 十六進(jìn)制。?
- 當(dāng)減淡或加深顏色時(shí)，最好使用
mix(..) 替代 darken(..) 和 lighten(..)。?
列表
- 使用逗號(hào)分隔列表。?
- 使用圓括號(hào)增加可讀性。?
- 列表尾部不要添加逗號(hào)（當(dāng)它們是內(nèi)聯(lián)狀態(tài)時(shí)）。?
Maps
- 當(dāng) map 內(nèi)部包含多個(gè)鍵值對(duì)時(shí)，將它們分成多行。?
- 為了增加可維護(hù)性，map 內(nèi)部的最后一個(gè)鍵值對(duì)應(yīng)該添加一個(gè)逗號(hào)。?
- 如果 map 的鍵是字符串，應(yīng)該使用引號(hào)包裹起來(lái)。?
聲明順序
- 只要保持開(kāi)發(fā)的一致性，無(wú)論哪種聲明順序（根據(jù)字母表或者類型排序）都是可以接受的。?
選擇器嵌套
- 減少選擇器嵌套。?
- 對(duì)偽類和偽元素使用選擇器嵌套。?
- 媒體查詢也可以嵌套到相關(guān)的選擇器當(dāng)中。?
命名約定
注釋
- CSS 中充滿了機(jī)巧，當(dāng)你有所疑問(wèn)的時(shí)候，就應(yīng)該寫下相關(guān)的注釋。?
- 對(duì)于變量、函數(shù)、混合宏和占位符創(chuàng)建的公開(kāi) API，使用 SassDoc 來(lái)注釋。?
變量
- 在公開(kāi) API 中使用
!default 標(biāo)志變量，讓后期的修改更安全。?
- 不要在頂層使用
!global 標(biāo)志，應(yīng)為這可能會(huì)在未來(lái)和 Sass 語(yǔ)法有沖突。?
擴(kuò)展
- 堅(jiān)持?jǐn)U展占位符，而不是擴(kuò)展既有的 CSS 選擇器。?
- 盡可能少地?cái)U(kuò)展占位符，避免潛在的副作用。?
