摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設(shè)計與實現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。

CSS代碼難維護眾所皆知。

為一個元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現(xiàn)；

作用于某個元素上的樣式又可能來自單個樣式規(guī)則，也可能來自多個樣式的組合，還可能來自父元素；

CSS樣式可以定義在元素的style屬性里面，也可以定義在頁面head部分，還可以定義在多帶帶的CSS文件中。

CSS樣式定義上的靈活性帶來的是CSS代碼的多樣性，如果毫無章節(jié)地使用這些定義樣式的方式，勢必會導(dǎo)致CSS代碼的混亂和難以維護。本文將拋磚引玉，總結(jié)出幾個方面來討論如何編寫可維護性的CSS代碼。

Web前端開發(fā)入門難度并不高，但是初學(xué)者如果沒有一個很好地學(xué)習(xí)和編碼習(xí)慣，則開發(fā)水平的提高速度會變得很慢。 by 《Web前端開發(fā)最佳實踐》黨建

不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。by 編碼規(guī)范 @mdo

命名規(guī)范和格式規(guī)范是代碼規(guī)范中最基本的規(guī)范，任何代碼的混亂都是從命令和格式的混亂開始，而意義明確的命名和規(guī)整的代碼格式則提高了代碼的可讀性與可維護性，給閱讀者和維護者留下來良好的第一印象。每個開發(fā)團隊都應(yīng)該有一套自己的規(guī)范。

組成類名稱的關(guān)鍵字的連接符為中劃線-。

.page-content-title {
    ...
}

為了避免class命名的重復(fù)，命名時取父元素的class名作為前綴。

/* 父元素的樣式聲明 */
.page-content {
    ...
}

/* 子元素的樣式聲明 */
.page-content-body {
    ...
}

在CSS樣式定義中，左大括號放置在選擇器的同一行，并和選擇器之間添加一個空格分隔，在保證可讀性的基礎(chǔ)上縮短代碼的行數(shù)；在樣式聲明中，屬性名稱和值之間用一個空格分隔，提高代碼可讀性。

/* 不推薦 */
.page-content-title
{
    border-left:1px solid #fff;
} 

/* 不推薦 */
.page-content-title{border-left:1px solid #fff;}

/* 推薦 */
.page-content-title {
    border-left: 1px solid #fff;
}

單行顯示不好注釋，不好備注，這應(yīng)該是壓縮工具的活兒~ by 前端編碼規(guī)范之CSS - Barret Lee

多個選擇器具有相同的樣式聲明時，每個選擇器應(yīng)該多帶帶占一行，便于閱讀和維護。

/* 不推薦 */
h1, h2, h3 {
    font-weight: bold;
    line-height: 1.5;
}

/* 推薦 */
h1,
h2,
h3 {
    font-weight: bold;
    line-height: 1.5;
}

在CSS樣式文件中添加注釋主要有兩種類型：文件頭部的文件信息注釋和正文中的解釋說明性注釋。文件信息 一般包括文件版本、版權(quán)信息以及作者等；解釋性說明的注釋 有給模塊的注釋和多帶帶給選擇器的注釋，模塊的注釋則需要添加注釋表明模塊樣式定義的開始和結(jié)束，CSS選擇器的注釋需要添加在選擇器的上一行，而不是和選擇器相同一行。注釋可以在壓縮的時候選擇性去掉。

/* 注釋規(guī)范說明：文件頭部的文件信息注釋 */
/*!
 * page content v1.0
 *
 * Copyright 2015
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Designed and built by dopppler
 * /

/* 注釋規(guī)范說明：模塊樣式定義的開始和結(jié)束 */
/* page container start */
.page-content {
    ...
}
.page-content-title {
    ...
}
...
/* page container end */

在 /* 后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用于聲明版權(quán)信息。by SASS用法指南 - 阮一峰的網(wǎng)絡(luò)日志

規(guī)范的 CSS 代碼首先應(yīng)該具有結(jié)構(gòu)清晰和模塊分明的特點。想象一下，如果在平時的開發(fā)中，拿到效果圖就切，切完寫，沒有先從頁面整體來規(guī)劃樣式，那么在開發(fā)的過程中就會出現(xiàn)某些代碼塊難以重用的情況，這樣就只能從原來的代碼中復(fù)制部分內(nèi)容組合成新的樣式定義。隨著站點功能越來越多，CSS 代碼中重復(fù)的代碼就會越來越多，最終一發(fā)不可收拾。那么，該如何做才能組織CSS代碼呢？

首先，組織CSS代碼文件。所有的CSS都可以分為兩大類：通用類和業(yè)務(wù)類。代碼的組織應(yīng)該把通用類和業(yè)務(wù)類的代碼放置于不同的目錄中。

css
 |-[業(yè)務(wù)類文件夾]
 |-[通用類-樣式重置].css
 |-[通用類-公用組件].css
 |-[通用類-ie兼容].css

[通用類-樣式重置].css 的作用是重置元素的默認樣式，目的時讓元素在各瀏覽器中有統(tǒng)一的外觀。CSS Reset 簡單的一句全部重置太過粗暴，大部分人都已投向 Normalize.css 的懷抱，當(dāng)然國內(nèi)不少團隊也總結(jié)出自己的一套 reset.css，建議自行搜索了解。

Normalize.css - A collection of HTML element and attribute style-normalizations.

[通用類-公用組件].css 的作用是放置公用模塊的樣式和一些基礎(chǔ)樣式。公用模塊包括頁面對話框、提示框等公用組件的樣式以及頁面頭部、底部、側(cè)邊欄等 UI 公用模塊的樣式。基礎(chǔ)樣式包括全局的頁面布局設(shè)置、字體設(shè)置、背景和前景色等，也包括一些公有的class，這些公有class使用頻繁，所以需要多帶帶定義和使用，以提高代碼的復(fù)用度。

強烈推薦使用 Less 和 Sass 等動態(tài)樣式語言和預(yù)處理工具，方便寫出高復(fù)用和高擴展性的 CSS 代碼。

[通用類-ie兼容].css 的作用是放置兼容舊版 IE 瀏覽器的樣式。如果把兼容舊版IE的CSS代碼和正常的代碼放置在一起，這種做法有兩個缺點，一是增加了非IE瀏覽器的加載樣式文件的負擔(dān)，二時如果未來決定不再支持舊版的IE瀏覽器，則需要修改多個文件，從而增加了維護的復(fù)雜度。

其余的CSS樣式文件 則用于具體業(yè)務(wù)模塊。不同模塊的樣式文件放置于不同的文件夾中。分隔模塊的粒度并沒有一個標準，原則上盡量保證每個模塊對應(yīng)的樣式文件行數(shù)不超過200行，如果某個模塊的樣式文件太大，則會繼續(xù)劃分為更小的模塊。

不要擔(dān)心CSS樣式文件過多，把關(guān)注點放在文件的管理上即可，因為到最后可以用自動構(gòu)建工具把多個樣式文件進行合并壓縮處理。

em、px 還是 % ？亦或是 rem ？頁面元素的尺寸（長度、寬度、內(nèi)外邊距等）以及頁面字體的大小時和頁面整體布局息息相關(guān)的，而頁面布局的方式又是多種多樣的。因此，如果沒有合理地設(shè)置頁面元素尺寸以及字體的大小，就會增加頁面布局的復(fù)雜性，也會使得頁面布局維護變得困難，還會使頁面的擴展性和使用平臺受到限制。那么該如何設(shè)置元素的尺寸和字體大小，從而達到最佳的可維護性呢？可參考以下三個建議：

盡量設(shè)置相對尺寸。頁面應(yīng)該是自適應(yīng)呢，還是固定尺寸呢？這個取決于頁面的設(shè)計。這里關(guān)注的是局部元素的尺寸要求使用相對大小，即局部自適應(yīng)。這樣當(dāng)整體模塊的尺寸更改時就不需要更改模塊內(nèi)部子模塊的尺寸了。

只有在可預(yù)知元素尺寸的情況下使用絕對尺寸。編寫的代碼一定要先遵循設(shè)計要求，在某些場合可能必須使用絕對尺寸，例如網(wǎng)頁整體的寬度固定、側(cè)邊欄寬度固定、頁頭和頁尾的高度固定等。

使用 rem 設(shè)置字體大小。rem是個低調(diào)的單位，但在近一兩年中開始火了起來。國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶、騰訊、小米等移動站點，隨處可見其蹤影。詳細用法可參見以下三篇文章或自行搜索了解。

web app變革之rem - 騰訊ISXUX
手機淘寶的flexible設(shè)計與實現(xiàn) - 前端亂燉
MobileWeb 適配總結(jié) - Lok"tar Ogar

上文已提及，這里推薦閱讀 @alsiso 同學(xué)寫的 CSS Reset 專題文章。

關(guān)于CSS Reset那些事（一）- SegmentFault
關(guān)于CSS Reset那些事（二）- SegmentFault
關(guān)于CSS Reset那些事（三）- SegmentFault
關(guān)于CSS Reset那些事（四）- SegmentFault

為什么要給樣式排序？因為，如果CSS屬性按照一定的規(guī)則排序，那么在開發(fā)過程中可以防止屬性的重復(fù)定義，代碼的檢查者也能很清晰地查看CSS樣式定義，更關(guān)鍵的是在后續(xù)維護過程中能快速定義特定的樣式屬性。盡管對CSS樣式屬性進行排序需要花費一些精力，但從代碼的可讀性和可維護性角度來考慮，這些付出將會是值得的。更何況，我們可以借助一些工具來完成。: )

一種較為合理的排序方式是 按類型分組排序。著名的 Web 前端專家 Andy Ford 推薦過一種按照類型分組排序的方式，他把CSS屬性分為7大類：

顯示與浮動（Display & Flow）

定位（Positioning）

尺寸（Dimensions）

邊框相關(guān)屬性（Margins、Padding、Borders、Outline）

字體樣式（Typographic Styles）

背景（Backgrounds）

其他樣式（Opacity、Cursors、Generated Content）

這種按照樣式類型分組排列的方式不僅把功能相似的屬性歸類到一起，并且按照樣式功能的重要性從上到下進行了排序。可以把影響元素頁面布局的樣式（如 float、margin、padding、height、width等）排到前面，而把不影響布局的樣式（如background、color、font等）放到后面。這種主次分明的排列方式，極大地提高了代碼的可維護性。

整理推薦的CSS屬性書寫順序 - CSDN
推薦大家使用的CSS書寫順序、規(guī)范 - 設(shè)計達人

當(dāng)然，如果在編寫代碼的時候直接按照這種方式寫肯定有難度，而且不方便頻繁地修改。最佳方式是編寫代碼的時候按照自己最有效率的方式來寫，編寫完成并提交的時候使用工具對其進行排序。推薦工具：CSScomb，一款免費高效并提供在線和主流代碼編輯器插件的CSS排序工具。

CSScomb - Makes your code beautiful.

什么是權(quán)重？如果前端工程師沒有深刻理解這個概念，將會很難寫出高質(zhì)量的CSS代碼。在討論權(quán)重之前，我們先來討論一下一些基礎(chǔ)知識。

CSS樣式有 6 種基礎(chǔ)選擇器：

ID 選擇器（如 #page_content{}）

類選擇器(如 .page-content-title{})

屬性選擇器（如 a[]{}）

偽類和偽對象選擇器（如 :hover{}、::after{}）

標簽類型（如 div{}）

通配符選擇器（如 body *{}）

所有在CSS樣式中定義的選擇符都是由這 6 種基礎(chǔ)選擇器組合而成的，組合的方式分為三種：

后代選擇符（如 .page .title{}）

子選擇符（如 .page>.title{}）

相鄰選擇符（如 .page+.title{}）

CSS權(quán)重指的是這些選擇器的優(yōu)先級，優(yōu)先級高的CSS樣式會覆蓋優(yōu)先級的樣式。優(yōu)先級越高說明權(quán)重越高。根據(jù) W3C 制定的CSS規(guī)范，CSS權(quán)重是通過如下規(guī)則計算的：

計算選擇符中的ID選擇器的數(shù)量（=a）

計算選擇符中的類選擇器、屬性選擇器以及偽類選擇器的數(shù)量（=b）

計算標簽類型選擇器的偽對象選擇器的數(shù)量（=c）

忽略全局選擇器

按照規(guī)則，基礎(chǔ)選擇器具有這樣的優(yōu)先級：
ID > 類 | 偽類 | 屬性選擇器 > 標簽類型 | 偽對象 > 通配符

分別計算 a、b、c 的值后，按順序連接 a、b、c 三個數(shù)字組成一個新數(shù)值，此數(shù)值即為所計算的選擇符的權(quán)重。另外，如果兩個選擇符的權(quán)重相同，則依照“就近原則”，最后定義的被采用。

你應(yīng)該知道的一些事情——CSS權(quán)重 - W3CPlus

明白權(quán)重的計算規(guī)則后，我們可以制定一些相關(guān)原則來提高樣式代碼的重用性和可維護性。

CSS樣式中盡量不要使用ID選擇器。一個頁面中不允許有兩個相同的ID，如果使用了ID選擇器就意味著此此樣式只能作用于一個元素，不能復(fù)用于其他元素。

減少子選擇器的層級。降低選擇符整體的權(quán)重，減少對HTML結(jié)構(gòu)的依賴。

使用組合的CSS類選擇器。面向?qū)ο缶幊桃粭l原則：“多組合，少繼承”。

上文已提及。

那些為了兼容舊版瀏覽器而添加的額外代碼，被成為 hack 代碼。大部分前端程序員都不愿意寫 hack 代碼，因為 hack 代碼不易理解且維護困難。

以下是兼容 IE 瀏覽器的一些實踐：

熟悉 IE 瀏覽器中常見的樣式兼容問題。IE 瀏覽器下的兼容問題一般分為兩類，一類時瀏覽器本身的Bug，另一類是標準不兼容，或者不支持標準（這類問題居多）。

Browserhacks - ie

分離樣式兼容代碼。為了當(dāng)未來某個時期不在支持某個舊版本的瀏覽器時，方便移除這些兼容代碼。

在 IE 瀏覽器中可以使用條件注釋，讓不同瀏覽器加載不同的樣式文件以達到兼容代碼和正常代碼分離的目的。

另外，為了提高兼容樣式的優(yōu)先級，可以在根元素（或者元素）上針對不同的瀏覽器添加不同的樣式類。

        <--

《Web前端開發(fā)最佳實踐》黨建

以上，歡迎拍磚斧正。