在參與規(guī)模龐大、歷時(shí)漫長且參與人數(shù)眾多的項(xiàng)目時(shí)，所有開發(fā)者遵守如下規(guī)則極為重要：

    保持 CSS 易于維護(hù)
    保持代碼清晰易懂
    保持 CSS 的可拓展性

　　為了實(shí)現(xiàn)這一目標(biāo)，我們要采用諸多方法。

　　本文檔第一部分將探討語法、格式以及分析 CSS 結(jié)構(gòu)；第二部分將圍繞方法論、思維框架以及編寫與規(guī)劃 CSS 的看法。
CSS 文檔分析

　　無論編寫什么文檔，我們都應(yīng)當(dāng)維持統(tǒng)一的風(fēng)格，包括統(tǒng)一的注釋、統(tǒng)一的語法與統(tǒng)一的命名規(guī)范。
　　總則

　　將行寬控制在 80 字節(jié)以下。漸變（gradient）相關(guān)的語法以及注釋中的 URL 等可以算作例外，畢竟這部分我們也無能為力。

　　我傾向于用 4 個(gè)空格而非 Tab 縮進(jìn)，并且將聲明拆分成多行。
　　單一文件與多文件

　　有人喜歡在一份文件文件中編寫所有的內(nèi)容，而我在遷移至 Sass 之后開始將樣式拆分成多個(gè)小文件。這都是很好的做法。無論你選擇哪種，下文的規(guī)則都將適用，而且如果你遵守這些規(guī)則的話你也不會(huì)遇到什么問題。這兩種寫法的區(qū)別僅僅在于目錄以及區(qū)塊標(biāo)題：
　　目錄

　　在 CSS 的開頭，我會(huì)維護(hù)一份目錄，就像這樣：

　　這份目錄可以告訴其他開發(fā)者這個(gè)文件中具體含有哪些內(nèi)容。這份目錄中的每一項(xiàng)都與其對(duì)應(yīng)的區(qū)塊標(biāo)題相同。

　　如果你在維護(hù)一份單文件 CSS，對(duì)應(yīng)的區(qū)塊將也在同一文件中。如果你是在編寫一組小文件，那么目錄中的每一項(xiàng)應(yīng)當(dāng)對(duì)應(yīng)相應(yīng)的 @include 語句。
　　區(qū)塊標(biāo)題

　　目錄應(yīng)當(dāng)對(duì)應(yīng)區(qū)塊的標(biāo)題。如下：

　　區(qū)塊標(biāo)題前綴 $ 可以讓我們使用 [Cmd|Ctrl]+F 命令查找標(biāo)題名時(shí)將搜索范圍限制在區(qū)塊標(biāo)題中。

　　如果你在維護(hù)一份大文件，那么在區(qū)塊之間空 5 行，如下：

　　在大文件中快速翻動(dòng)時(shí)這些大塊的空檔有助于區(qū)分區(qū)塊。

　　如果你在維護(hù)多份以 include 連接的 CSS 的話，在每份文件頭加上標(biāo)題即可，不必這樣空行。
　代碼順序

　　盡量按照特定順序編寫規(guī)則，這將確保你充分發(fā)揮 CSS 中第一個(gè) C 的意義：cascade，層疊。

　　一份規(guī)劃良好的 CSS 應(yīng)當(dāng)按照如下排列：

    Reset 萬物之根源
    元素類型 沒有 class 的 h1、ul 等
    對(duì)象以及抽象內(nèi)容 最一般、最基礎(chǔ)的設(shè)計(jì)模式
    子元素 由對(duì)象延伸出來的所有拓展及其子元素
    修補(bǔ) 針對(duì)異常狀態(tài)

　　如此一來，當(dāng)你依次編寫 CSS 時(shí)，每個(gè)區(qū)塊都可以自動(dòng)繼承在它之前區(qū)塊的屬性。這樣就可以減少代碼相互抵消的部分，減少某些特殊的問題，組成更理想的 CSS 結(jié)構(gòu)。

　　關(guān)于這方面的更多信息，強(qiáng)烈推薦 Jonathan Snook 的 SMACSS。
　CSS 樣式集分析

　　編寫 CSS 樣式時(shí)，我習(xí)慣遵守這些規(guī)則：

    class 名稱以連字符（-）連接，除了下文提到的 BEM 命名法；
    縮進(jìn) 4 空格；
    聲明拆分成多行；
    聲明以相關(guān)性順序排列，而非字母順序；
    有前綴的聲明適當(dāng)縮進(jìn)，從而對(duì)齊其值；
    縮進(jìn)樣式集從而反映 DOM；
    保留最后一條聲明結(jié)尾的分號(hào)。

　　例如：

　　我們可以發(fā)現(xiàn)，.widget-heading 是 .widget 的子元素，因?yàn)榍罢叩臉邮郊群笳叨嗫s進(jìn)了一級(jí)。這樣通過縮進(jìn)就可以讓開發(fā)者在閱讀代碼時(shí)快速獲取這樣的重要信息。

　　我們還可以發(fā)現(xiàn) .widget-heading 的聲明是根據(jù)其相關(guān)性排列的：.widget-heading 是行間元素，所以我們先添加字體相關(guān)的樣式聲明，接下來是其它的。

　　以下是一個(gè)沒有拆分成多行的例子：

　　在這個(gè)例子（來自inuit.css’s table grid system）中，將 CSS 放在一行內(nèi)可以使得代碼更緊湊。
　命名規(guī)范

　　一般情況下我都是以連字符（-）連接 class 的名字（例如 .foo-bar 而非 .foo_bar 或 .fooBar），不過在某些特定的時(shí)候我會(huì)用 BEM（Block, Element, Modifier）命名法。

　　BEM 命名法可以使得選擇器更規(guī)范，更清晰，更具語義。

　　該命名法按照如下格式：

　　其中：

    .block 代表某個(gè)基本的抽象元素；
    .block__element 代表構(gòu)成 .block 的一個(gè)子元素；
    .block--modifier 代表 .block 的某個(gè)不同狀態(tài)或版本。

　　打個(gè)比方：

　　這個(gè)例子中我們描述的基本元素是一個(gè)人，然后這個(gè)人可能是一個(gè)女人。我們還知道人擁有手，這些是人體的一部分，而手也有不同的狀態(tài)，如同左手與右手。

　　這樣我們就可以根據(jù)親元素來劃定選擇器的命名空間并傳達(dá)該選擇器的職能，例如根據(jù)這個(gè)選擇器是一個(gè)子元素（__）還是其親元素的不同狀態(tài)（--）。

　　由此，.page-wrapper 是一個(gè)獨(dú)立的選擇器。這是一個(gè)符合規(guī)范的命名，因?yàn)樗皇瞧渌氐淖釉鼗蚱渌鼱顟B(tài)；然而 .widget-heading 則與其它對(duì)象有關(guān)聯(lián)，它應(yīng)當(dāng)是 .widget 的子元素，所以我們應(yīng)當(dāng)將其重命名為 .widget__heading。

　　BEM 命名法雖然不太好看，而且相當(dāng)冗長，但是它使得我們可以通過名稱快速獲知元素的功能和元素之間的關(guān)系。與此同時(shí)，BEM 語法中的重復(fù)部分非常有利于 gzip 的壓縮算法。

　　無論你是否使用 BEM 命名法，你都應(yīng)當(dāng)確保 class 命名得當(dāng)，力保一字不多、一字不少；將元素命名抽象化以提高復(fù)用性（例如 .ui-list，.media）。子元素的命名則要盡量精準(zhǔn)（例如 .user-avatar-link）。不用擔(dān)心 class 名的數(shù)量或長度，因?yàn)閷懙煤玫拇a gzip 也能有效壓縮。
　　HTML 中的 class

　　為了確保易讀性，在 HTML 標(biāo)記中用兩個(gè)空格隔開 class 名，例如：

　　增加的空格應(yīng)當(dāng)可以使得在使用多個(gè) class 時(shí)更易閱讀與定位。
　　JavaScript 鉤子

　　切勿將標(biāo)記 CSS 樣式的 class 用作 JavaScript 鉤子。把 JS 行為與樣式混在一起將無法對(duì)其分別處理。

　　如果你要把 JS 和某些標(biāo)記綁定起來的話，寫一個(gè) JS 專用的 class。簡單地說就是劃定一個(gè)前綴 .js- 的命名空間，例如 .js-toggle，.js-drag-and-drop。這意味著我們可以通過 class 同時(shí)綁定 JS 和 CSS 而不會(huì)因?yàn)闆_突而引發(fā)麻煩。

　　上面的這個(gè)標(biāo)記有兩個(gè) class，你可以用其中一個(gè)來給這個(gè)可排序的表格欄添加樣式，用另一個(gè)添加排序功能。
　　I18n

　　雖然我（該 CSS Guideline 文檔原作者 Harry Roberts）是個(gè)英國人，而且我一向拼寫 colour 而非 color，但是為了追求統(tǒng)一，我認(rèn)為在 CSS 中用美式拼法更佳。CSS 以及其它多數(shù)語言都是以美式拼法編寫，所以如果在 .colour-picker{} 中寫 color:red 就缺乏統(tǒng)一性。我以前主張同時(shí)用兩種拼法，例如：

　　但是我最近參與了一份規(guī)模龐大的 Sass 項(xiàng)目，這個(gè)項(xiàng)目中有許多的顏色變量（例如 $brand-color，$highlight-color 等等），每個(gè)變量要維護(hù)兩種拼法實(shí)在辛苦，要查找并替換時(shí)也需要兩倍的工作量。

　　所以為了統(tǒng)一，把所有的 class 與變量都以你參與的項(xiàng)目的慣用拼法命名即可。
　注釋

　　我使用行寬不超過 80 字節(jié)的文檔塊風(fēng)格注釋：

　　在注釋中應(yīng)當(dāng)盡量詳細(xì)描述代碼，因?yàn)閷?duì)你來說清晰易懂的內(nèi)容對(duì)其他人可能并非如此。每寫一部分代碼就要專門寫注釋以詳解。
　　注釋的拓展用法

　　注釋有許多很高級(jí)的用法，例如：

    準(zhǔn)修飾選擇器（Quasi-qualified selectors）
    代碼標(biāo)簽
    繼承標(biāo)記

　　準(zhǔn)修飾選擇器（Quasi-qualified selectors）

　　你應(yīng)當(dāng)避免過分修飾選擇器，例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過分修飾選擇器將影響性能，影響 class 復(fù)用性，增加選擇器私有度。這些都是你應(yīng)當(dāng)竭力避免的。

　　不過有時(shí)你可能希望告訴其他開發(fā)者 class 的使用范圍。以 .product-page 為例，這個(gè) class 看起來像是一個(gè)根容器，可能是 html 或者 body 元素，但是僅憑 .product-page 則無法判斷。

　　我們可以在選擇器前加上準(zhǔn)修飾（即將前面的類型選擇器注釋掉）來描述我們規(guī)劃的 class 作用范圍：

　　這樣我們就能準(zhǔn)確獲知該 class 的作用范圍而不會(huì)影響復(fù)用性。

　　其它例子如：

　　這樣我們就能在不影響代碼私有度的前提下獲知 class 作用范圍。
　　代碼標(biāo)簽

　　如果你寫了一組新樣式的話，可以在它上面加上標(biāo)簽，例如：

　　這些標(biāo)簽可以使得其他開發(fā)者快速找到相關(guān)代碼。如果一個(gè)開發(fā)者需要查找和列表相關(guān)的部分，他只要搜索 ^lists 就能快速定位到 .nav，.matrix 以及其它相關(guān)部分。
　　繼承標(biāo)記

　　將面向?qū)ο蟮乃悸酚糜?CSS 編寫的話，你經(jīng)常能找到兩部分 CSS 密切相關(guān)（其一為基礎(chǔ)，其一為拓展）卻分列兩處。我們可以用繼承標(biāo)記來在原元素和繼承元素之間建立緊密聯(lián)系。這些在注釋中的寫法如下：

　　在元素的基本樣式中：

　　在元素的拓展樣式中：

　　這樣一來我們就能在兩塊相隔很遠(yuǎn)的代碼間建立緊密聯(lián)系。
　編寫 CSS

　　之前的章節(jié)主要探討如何規(guī)劃 CSS，這些都是易于量化的規(guī)則。本章將探討更理論化的東西，也將探討我們的態(tài)度與方法。
　編寫新組件

　　編寫新組件時(shí)，要在著手處理 CSS 之前寫好 HTML 部分。這可以令你準(zhǔn)確判斷哪些 CSS 屬性可以繼承，避免重復(fù)浪費(fèi)。

　　先寫標(biāo)記的話，你就可以關(guān)注數(shù)據(jù)、內(nèi)容與語義，在這之后再添加需要的 class 和 CSS 樣式。
　面向?qū)ο?CSS

　　我以面向?qū)ο?CSS 的方式寫代碼。我把組件分成結(jié)構(gòu)（對(duì)象）與外觀（拓展）。正如以下分析（注意此處并非示例）：

　　我們?cè)谖葑永镉性S多房間，它們都有共同的部分：地板、天花板、墻壁和門。這些共享的部分我們可以放到一個(gè)抽象的 .room{} class 中。不過我們還有其它與眾不同的房間：一個(gè)廚房可能有地磚，臥室可能有地毯，洗手間可能沒有窗戶但是臥室會(huì)有，每個(gè)房間的墻壁顏色也許也會(huì)不一樣。面向?qū)?象 CSS 的思路使得我們把相同部分抽象出來組成結(jié)構(gòu)部分，然后用更具體的 class 來拓展這些特征并添加特殊的處理方法。

　　所以比起編寫大量各自不同的模塊，應(yīng)當(dāng)努力找出這些模塊中重復(fù)的設(shè)計(jì)模式并將其抽象出來，寫成一個(gè)可以復(fù)用的 class，將其用作基礎(chǔ)然后編寫其它拓展模塊的特殊情形。

　　當(dāng)你要編寫一個(gè)新組件時(shí)，將其拆分成結(jié)構(gòu)和外觀。編寫結(jié)構(gòu)部分時(shí)用最通用 class 以保證復(fù)用性，編寫外觀時(shí)用更具體的 class 來添加設(shè)計(jì)方法。
　布局

　　所有組件都不要聲明寬度，而由其親元素或格柵系統(tǒng)來決定。

　　堅(jiān)決不要聲明高度。高度應(yīng)當(dāng)僅僅用于尺寸已經(jīng)固定的東西，例如圖片和 CSS Sprite。在 p，ul，div 等元素上不應(yīng)當(dāng)聲明高度。如果需要的話可以使用更加靈活的 line-height。

　　格柵系統(tǒng)應(yīng)當(dāng)當(dāng)作書架來理解。是它們?nèi)菁{內(nèi)容，而不是把它們本身當(dāng)成內(nèi)容裝起來，正如你先搭起書架再把東西放進(jìn)去。比起聲明它們的尺寸，把格柵系統(tǒng)和元素的其它屬性分來開處理更有助于布局，也使得我們的前端工作更高效。

　　你在格柵系統(tǒng)上不應(yīng)當(dāng)添加任何樣式，它們僅僅是為布局而用。在格柵系統(tǒng)內(nèi)部再添加樣式。在格柵系統(tǒng)中任何情況下都不要添加盒模型相關(guān)屬性。
　UI 尺寸

　　我用很多方法設(shè)定 UI 尺寸，包括百分比，px，em，rem 以及干脆什么都不用。

　　理想情況下，格柵系統(tǒng)應(yīng)當(dāng)用百分比設(shè)定。如上所述，因?yàn)槲矣酶駯畔到y(tǒng)來固定欄寬和頁寬，所以我可以不用理會(huì)元素的尺寸。

　　我用 rem 定義字號(hào)，并且輔以 px 以兼容舊瀏覽器。這可以兼具 em 和 px 的優(yōu)勢。下面是一個(gè)非常漂亮的 Sass Mixin，假設(shè)你在別處聲明了基本字號(hào)（base-font-size）的話，用它就可以生成 rem 以及兼容舊瀏覽器的 px。

　　我只在已經(jīng)固定尺寸的元素上使用 px，包括圖片以及尺寸已經(jīng)用 px 固定的 CSS Sprite。
　　字號(hào)

　　我會(huì)定義一些與格柵系統(tǒng)原理類似的 class 來聲明字號(hào)。這些 class 可以用于雙重標(biāo)題分級(jí)，關(guān)于這點(diǎn)請(qǐng)閱讀 Pragmatic, practical font-sizing in CSS。
　簡寫

　　CSS 簡寫應(yīng)當(dāng)謹(jǐn)慎使用。

　　編寫像 background: red; 這樣的屬性的確很省事，但是你這么寫的意思其實(shí)是同時(shí)聲明 background-image: none; background-position: top left; background-repeat: repeat; background-color: red;。雖然大多數(shù)時(shí)候這樣不會(huì)出什么問題，但是哪怕只出一次問題就值得考慮要不要放棄簡寫了。這里應(yīng)當(dāng)改為 background-color: red;。

　　類似的，像 margin: 0; 這樣的聲明的確簡潔清爽，但是還是應(yīng)當(dāng)盡量寫清楚。如果你只是想修改底邊邊距，就要具體一些，寫成 margin-bottom: 0;。

　　與此同時(shí)你需要聲明的屬性也要寫清楚，不要因?yàn)楹唽懚捌渌鼘傩浴＠缛绻阒幌敫牡舻撞康?margin，那就不要用會(huì)把其它邊距也清零的 margin: 0。

　　簡寫雖然好，但也很容易濫用。
　ID

　　在我們開始處理選擇器之前，牢記這句話：

　　在 CSS 里堅(jiān)決不要用 ID。

　　在 HTML 里 ID 可以用于 JS 以及錨點(diǎn)定位，但是在 CSS 里只要用 class，一個(gè) ID 也不要用。

　　Class 的優(yōu)勢在于復(fù)用性，而且私有度也并不高。在項(xiàng)目中私有度非常容易導(dǎo)致問題，所以將其降低就尤為重要。ID 的私有度是 class 的 255 倍，所以在 CSS 中堅(jiān)決不要使用。
　選擇器

　　務(wù)必保持選擇器簡短高效。

　　通過頁面元素位置而定位的選擇器并不理想。例如 .sidebar h3 span{} 這樣的選擇器就是定位過于依賴相對(duì)位置，如果把 span 移到 h3 和 sidebar 外面時(shí)就很難保持其樣式。

　　結(jié)構(gòu)復(fù)雜的選擇器將會(huì)影響性能。選擇器結(jié)構(gòu)越復(fù)雜（如 .sidebar h3 span 為三層，.content ul p a 是四層），瀏覽器的開銷就越大。

　　盡量使得樣式不依賴于其定位，盡量保持選擇器簡潔清晰。

　　作為一個(gè)整體，選擇器應(yīng)當(dāng)盡量簡短（例如只有一層結(jié)構(gòu)），但是 class 名則不應(yīng)當(dāng)過于簡略，例如 .user-avatar 就遠(yuǎn)比 .usr-avt 好。

　　牢記：class 無所謂是否語義化；應(yīng)當(dāng)關(guān)注它們是否合理。不要強(qiáng)調(diào) class 名要符合語義，而要注重使用合理且不會(huì)過時(shí)的名稱。
　　過度修飾的選擇器

　　由前文所述，過度修飾的選擇器并不理想。

　　過度修飾的選擇器是指像 div.promo 這樣的。很可能你只用 .promo 也能得到相同的效果。當(dāng)然你可能偶爾會(huì)需要用元素類型來修飾 class（例如你寫了一個(gè) .error 而且想讓它在不同的元素類型中顯示效果不一樣，例如 .error { color: red; } div.error { padding: 14px; }），但是大多數(shù)時(shí)候還是應(yīng)當(dāng)盡量避免。

　　再舉一個(gè)修飾過度的選擇器例子，ul.nav li a{}。如前文所說，我們馬上就可以刪掉 ul 因?yàn)槲覀冎?.nav 是個(gè)列表，然后我們就可以發(fā)現(xiàn) a 一定在 li 中，所以我們就能將這個(gè)選擇器改寫成 .nav a{}。
　　選擇器性能

　　雖然瀏覽器性能日漸提升，渲染 CSS 速度越來越快，但是你還是應(yīng)當(dāng)關(guān)注效率。使用簡短、沒有嵌套的選擇器，不使用全局選擇器（* {}）作為核心選擇器，避免使用日漸復(fù)雜的 CSS3 新選擇器可以避免這樣的問題。

　　譯注，核心選擇器：瀏覽器解析選擇器為從右向左的順序，最右端的元素是樣式生效的元素，是為核心選擇器。
　使用 CSS 選擇器的目的

　　比起努力運(yùn)用選擇器定位到某元素，更好的辦法是給你想要添加樣式的元素直接添加一個(gè) class。我們以 .header ul {} 這樣一個(gè)選擇器為例。

　　假定這個(gè) ul 就是這個(gè)網(wǎng)站的全站導(dǎo)航，它位于 header 中，而且目前為止是 header 中唯一的 ul 元素。.header ul{} 的確可以生效，但是這樣并不是好方法，它很容易過時(shí)，而且非?；逎?。如果我們?cè)?header 中再添加一個(gè) ul 的話，它就會(huì)套用我們給這個(gè)導(dǎo)航部分寫的樣式，哪怕我們?cè)O(shè)想的不是這個(gè)效果。這意味著我們要么要重構(gòu)許多代碼，要么給后面的 ul 新寫許多樣式來抵消之前的影響。

　　你的選擇器必須符合你要給這個(gè)元素添加樣式的原因。思考一下，「我定位到這個(gè)元素，是因?yàn)樗?.header 下的 ul，還是因?yàn)樗俏业木W(wǎng)站導(dǎo)航？」這將決定你應(yīng)當(dāng)如何使用選擇器。

　　確保你的核心選擇器不是類型選擇器，也不是高級(jí)對(duì)象或抽象選擇器。例如你在我們的 CSS 中肯定找不到諸如 .sidebar ul {} 或者 .footer .media {} 這樣的選擇器。

　　表達(dá)清晰：直接找到你要添加樣式的元素，而非其親元素。不要想當(dāng)然地認(rèn)為 HTML 不會(huì)改變。用 CSS 直接命中你需要的元素，而非投機(jī)取巧。

　!important

　　只在起輔助作用的 class 上用 !important。用 !important 提升優(yōu)先級(jí)也可以，例如如果你要讓某條規(guī)則一直生效的話，可以用 .error { color:red!important; }。

　　避免主動(dòng)使用 !important。例如 CSS 寫得很復(fù)雜時(shí)不要用它來取巧，要好好整理并重構(gòu)之前的部分，保持選擇器簡短并且避免用 ID 將效果拔群。
　魔數(shù)與絕對(duì)定位

　　魔數(shù)（Magic Number）是指那些「湊巧有效果」的數(shù)字，使用魔數(shù)非常不好，因?yàn)樗鼈冎皇侵螛?biāo)不治本而且缺乏拓展性。

　　例如使用 .dropdown-nav li:hover ul { top: 37px; } 把下拉菜單移動(dòng)下來遠(yuǎn)非良策，因?yàn)檫@里的 37px 就是個(gè)魔數(shù)。37px 會(huì)生效的原因是因?yàn)檫@時(shí) .dropbox-nav 碰巧高 37px 而已。

　　這時(shí)你應(yīng)該用 .dropdown-nav li:hover ul { top: 100%; }，也即無論 .dropbox-down 多高，這個(gè)下拉菜單都會(huì)往下移動(dòng) 100%。

　　每當(dāng)你要在代碼中放入數(shù)字的時(shí)候，請(qǐng)三思而行。如果你能用一個(gè)關(guān)鍵字（例如 top: 100% 意即「從上面拉到最下面」）替換之，或者有更好的解決方法的話，就盡量避免直接出現(xiàn)數(shù)字。

　　你在 CSS 中留下的每一個(gè)數(shù)字，都是你許下而不愿遵守的承諾。
　條件判斷

　　專門為 IE 寫的樣式基本上都是可以避免的，唯一需要為 IE 專門處理的是為了處理 IE 不支持的內(nèi)容（例如 PNG）。

　　簡而言之，如果你重構(gòu) CSS 的話，所有的布局和盒模型都不用額外兼容 IE。也就是說你基本上不用 <!--[if IE 7]> element{ margin-left:-9px; } < ![endif]--> 或者類似的兼容 IE 的寫法。
　Debugging

　　如果你要解決 CSS 問題的話，先把舊代碼拿掉再寫新的。如果舊的 CSS 中有問題的話，寫新代碼是解決不了的。

　　把 CSS 代碼和 HTML 部分刪掉，直到?jīng)]有 BUG 為止，然后你就知道問題出在哪里了。

　　有時(shí)候?qū)懮弦粋€(gè) overflow: hidden 或者其它能把問題藏起來的代碼的確效果立竿見影，但是 overflow 方面可能根本就沒問題。所以要治本，而不是單純治標(biāo)。
　CSS 預(yù)處理器

　　我用 Sass。使用時(shí)應(yīng)當(dāng)靈活運(yùn)用。用 Sass 可以令你的 CSS 更強(qiáng)大，但是不要嵌套得太復(fù)雜。在 Vanilla CSS 中，只在必要的地方用嵌套即可，例如：

　　這樣的寫法在普通 CSS 里完全用不到。以下為不好的 Sass 寫法：

　　如果你用 Sass 的話，盡量這么寫：