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

CSS代碼難維護(hù)眾所皆知。

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

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

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

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

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

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

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

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

.page-content-title {
    ...
}

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

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

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

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

/* 不推薦 */
.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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不要擔(dān)心CSS樣式文件過(guò)多，把關(guān)注點(diǎn)放在文件的管理上即可，因?yàn)榈阶詈罂梢杂米詣?dòng)構(gòu)建工具把多個(gè)樣式文件進(jìn)行合并壓縮處理。

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

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

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

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

web app變革之rem - 騰訊ISXUX
手機(jī)淘寶的flexible設(shè)計(jì)與實(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

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

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

顯示與浮動(dòng)（Display & Flow）

定位（Positioning）

尺寸（Dimensions）

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

字體樣式（Typographic Styles）

背景（Backgrounds）

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

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

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

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

CSScomb - Makes your code beautiful.

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

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

ID 選擇器（如 #page_content{}）

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

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

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

標(biāo)簽類型（如 div{}）

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

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

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

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

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

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

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

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

計(jì)算標(biāo)簽類型選擇器的偽對(duì)象選擇器的數(shù)量（=c）

忽略全局選擇器

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

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

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

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

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

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

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

上文已提及。

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

以下是兼容 IE 瀏覽器的一些實(shí)踐：

熟悉 IE 瀏覽器中常見(jiàn)的樣式兼容問(wèn)題。IE 瀏覽器下的兼容問(wèn)題一般分為兩類，一類時(shí)瀏覽器本身的Bug，另一類是標(biāo)準(zhǔn)不兼容，或者不支持標(biāo)準(zhǔn)（這類問(wèn)題居多）。

Browserhacks - ie

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

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

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

        <--

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

以上，歡迎拍磚斧正。