CSS模塊化打包工具CSS-Combo：CSS模塊打包利器

上半年在團(tuán)隊(duì)做自動(dòng)化之類的工作，也學(xué)習(xí)了NodeJS，確實(shí)，NodeJS很適合做一些小工具神馬的，今天我給大家介紹的就是我自己基于NodeJS寫的CSS模塊化打包工具：CSS Combo，項(xiàng)目地址：httPS://github.com/daxingplay/css-combo

說起模塊化，前端一般談JS模塊化的居多，畢竟JS是編程語言，比如業(yè)內(nèi)的seajs、KISSY loader等，都有很成熟的模塊化規(guī)則和方案了，前端工程師可以采用模塊化的方法去編寫頁面，打包，上線，但是CSS界卻沒有。

后來，CSS界出現(xiàn)了SASS、LESS之類的語言，這些語言的出現(xiàn)可以說是非常應(yīng)景的，有一點(diǎn)很重要，拿LESS舉例，less支持了模塊化，你可以@import ‘xxx.less’的形式導(dǎo)入其他less文件（模塊），方便模塊化。我也正是從這點(diǎn)得到了靈感，想出了如何去做css模塊化。

CSS模塊化

其實(shí)，CSS規(guī)范里面就已經(jīng)提到相關(guān)內(nèi)容了，就是@import語法。這個(gè)語法是被當(dāng)前主流瀏覽器（當(dāng)然包括ie6）原生支持的。具體怎么用我想我不用在這里浪費(fèi)大量篇幅給大家介紹語法，大家可以看下mozilla里面對(duì)@import語法的解釋（鏈接），為啥大家很少用呢，大概很大一部分原因是因?yàn)閟teve的這篇博文。確實(shí)，如果在生產(chǎn)環(huán)境單獨(dú)去用@import，會(huì)有較為嚴(yán)重的性能，而且不同的瀏覽器以及不同的用法下也有不同的表現(xiàn)，比較讓人郁悶。但是，這并不妨礙@import成為CSS模塊化的利器。

想必@import誕生就是為了解決css模塊化的問題吧。我們先來舉一個(gè)例子看看CSS模塊化的優(yōu)勢(shì)：

傳統(tǒng)的開發(fā)

假如你要開發(fā)某大型網(wǎng)站首頁，那html的head里面應(yīng)該是這樣引用樣式的：

<linkrel="stylesheet"type="text/css"href="/path/to/style.css">

為了頁面上比較好的性能，減少創(chuàng)建http請(qǐng)求的消耗，我們一般會(huì)選擇盡量減少link的css文件數(shù)量，假如本例中，頁面上所有的樣式都寫在了style.css里面�？上攵獙�(duì)于一個(gè)大型網(wǎng)站來講，這個(gè)文件會(huì)有多長(zhǎng)多長(zhǎng)多長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)。。。。如果出現(xiàn)bug或者想改個(gè)東西，肯定找半天；而且現(xiàn)在界內(nèi)對(duì)于CSS開發(fā)并沒有很成熟的最佳實(shí)踐或者約定可循，很多時(shí)候，前端為了加快進(jìn)度，可能會(huì)把某一個(gè)功能的代碼放在css不同的地方，如果想下線某個(gè)功能，肯定不敢亂刪。

這時(shí)候，CSS模塊化的優(yōu)勢(shì)就體現(xiàn)出來了！

模塊化開發(fā)

頁面不改，我們還是只引用那一個(gè)樣式，style.css，但是文件內(nèi)容改成下面的：

/**
 
 * xxx頁面入口樣式文件style.css
 
 */
 
@import './utils/base.css';
 
/*頁面基礎(chǔ)框架（骨架）*/
 
@import './mods/layout.css';
 
@import './mods/header.css';
 
@import './mods/nav.css';
 
/*首頁焦點(diǎn)圖*/
 
@import './mods/flash-pic.css';
 
………這里省略諸多模塊………
 
@import './mods/footer.css';

這里，我們把style.css中混亂的樣式劃分成了一個(gè)一個(gè)的子文件，作為模塊�？梢钥吹�，作為示例，我把頁面的一些reset樣式以及一些站點(diǎn)公用樣式放在了util目錄下的base.css中，把頁頭拆分成header.css，把首頁焦點(diǎn)圖的樣式單獨(dú)拆分成falsh-pic.css，把頁面的基礎(chǔ)布局都放在了layout.css這個(gè)文件中。然后相應(yīng)的代碼就在對(duì)應(yīng)的模塊中寫，是不是看起來簡(jiǎn)潔、好維護(hù)很多？

不光是簡(jiǎn)潔，使用@import形式的模塊化還有下列好處：

瀏覽器原生支持。這點(diǎn)是這個(gè)工具或者這種模塊化形式的亮點(diǎn)。對(duì)于less，想要在開發(fā)環(huán)境下方便地修改，還需要額外引入一個(gè)js文件，或者采取less實(shí)時(shí)編譯之類的方法。對(duì)于實(shí)時(shí)編譯，像我這種用idea編輯器自動(dòng)保存的人很蛋疼，每次自動(dòng)保存的時(shí)候less編譯報(bào)錯(cuò)。。。而采用這種@import xxx.css文件的方法，我們可以很方便地在開發(fā)階段，直接調(diào)試。不需要引入額外的js文件去解析style.css文件。頁面中直接引入style.css文件，通過http瀑布圖可以看到，base.css、layout.css等被一個(gè)一個(gè)加載進(jìn)來了。

方便下線某個(gè)功能。這個(gè)是所有語言模塊化的優(yōu)勢(shì)，比如哪天PD說，首頁焦點(diǎn)圖那個(gè)地方我想換個(gè)樣式，以往，我們很多都是直接在html里面改掉原來的class，然后在style.css里面直接加上新的樣式，老的也不敢刪，怕刪錯(cuò)了，即使刪了也可能會(huì)漏，因?yàn)椴煌５腷ugfix可能會(huì)導(dǎo)致代碼亂寫。而采用模塊化的方案，我直接把@import ‘./mods/flash-pic.css’這一行注釋掉，然后再@import新的樣式，這樣，即使上線了，PD說效果不好，想換回原來的，只要改一下注釋，重新打包，豈不是很方便？

便于管理各種日常需求。好，頁面做好了，上線了，PD今天腦袋抽風(fēng)，說我要加一個(gè)功能，首頁右側(cè)加一個(gè)建議反饋入口，以往，我們要打開style.css，想想在哪兒加好，或者直接加在最后，也不管最后的地方是放什么的。采用模塊化之后，我們?cè)趕tyle.css的最后再@import ‘./mods/feedback.css’即可，然后加上注釋：/* 2012-12-06 PD要求加上建議反饋 */，這樣以后其他修改者也能快速知道你這個(gè)模塊是干神馬的。

方便合作開發(fā)。這也是所有語言模塊化的優(yōu)勢(shì)。對(duì)于一個(gè)大型項(xiàng)目，往往共同開發(fā)一個(gè)文件，沖突的可能性非常大，很多情況下，我改了一個(gè)小地方，提交上去就沖突了，然后再花費(fèi)比bugfix多10倍的時(shí)間去解決沖突，然后還不知道會(huì)不會(huì)產(chǎn)生另外10個(gè)新bug，而模塊化，每個(gè)人負(fù)責(zé)哪些模塊，職責(zé)非常明確，不容易出現(xiàn)問題。

依賴寫在入口文件，而不是打包腳本的配置文件。這樣開發(fā)和打包分離，新加、減少模塊不需要去修改打包配置，方便多人協(xié)作

方便調(diào)試，這是非常重要的特點(diǎn)，我會(huì)在后面詳細(xì)闡述。

好，說完CSS模塊化，以及如何利用@import形式來組織自己的模塊，大家是不是感覺這種形式讓你眼前一亮呢？慢著，steve大牛不是說這種@import方式有性能問題么？

是的，如果這樣開發(fā)完直接上線的話，頁面會(huì)有一些問題，我就不拿steve的博文再說一遍了，感興趣的同學(xué)可以自己去看看大牛的文章。我就挑一些比較明顯的問題說一下：

因?yàn)锧import的文件是額外請(qǐng)求的，所以頁面加載的時(shí)候會(huì)有一小會(huì)兒的裸體（樣式?jīng)]加載進(jìn)來），要等這些模塊一個(gè)一個(gè)加載

請(qǐng)求數(shù)太多，頁面性能不佳，對(duì)服務(wù)器壓力也會(huì)相對(duì)大一些。

steve大牛提到的不同的瀏覽器以及不同的書寫形式可能會(huì)有不同的加載順序。

所以，最好的辦法就是把模塊打包！這和js模塊化一樣的，模塊化開發(fā)，然后上線之前打包，線上完美使用。

CSS Combo：CSS模塊打包利器

像js打包，一般都會(huì)有配備的打包工具。比如seajs有他的spm，kissy有我寫的module-compiler（NodeJS版本）等等，對(duì)于css，很多人是用ant的concat或者grunt的concat，這樣做的不利的一面就是要把css模塊依賴寫在打包腳本的配置文件中，很不利于維護(hù)。很多時(shí)候，你新增了模塊，忘記了修改打包腳本的配置，然后發(fā)上去發(fā)現(xiàn)我的腳本怎么沒生效？查了半天才發(fā)現(xiàn)是沒打包進(jìn)去。

如果你利用我上面介紹的@import形式來組織你的css，那么你就可以用我寫的配套打包工具CSS Combo了：

首先安裝css combo：

npm install css-combo

然后進(jìn)入你所在的入口文件（本例為style.css）目錄，輸入：

csscombo style.css style.combo.css

這樣就會(huì)把style.css文件打包成style.combo.css文件。很簡(jiǎn)單吧。當(dāng)然還有其他參數(shù)，請(qǐng)見github文檔

好吧，你不喜歡用命令，或者你想整合該工具到你自己的一整套打包工具中，可以到github上看相關(guān)的api文檔：https://github.com/daxingplay/css-combo

如何利用CSS模塊化方便調(diào)試

模塊化，非常重要的一個(gè)特點(diǎn)就是要方便調(diào)試。否則我把壓縮之后的打包文件發(fā)上去了，發(fā)現(xiàn)線上出bug了怎么辦？這里，你只需要選擇一個(gè)代理工具將style-min.css（或者style.combo.css）文件代理成你的源碼文件style.css，然后刷新一下，看看是不是都模塊加載了？

或者，我也推薦你用這種方案，和開發(fā)配合起來，比如后臺(tái)是php，我可以在引用style-min.css的時(shí)候這么寫：

if(!empty($_GET['css-debug'])){
 
    echo '
<link href="http://xxx/style.css">';
 
}else{
 
    echo '
<link href="http://xxx/style-min.css">';
 
}

這樣，在線上，你可以在url后面加上css-debug參數(shù)，那么頁面就引用了style.css腳本，樣式文件全部模塊化載入，方便你調(diào)試，能夠快速定位到出錯(cuò)的模塊；而普通訪客進(jìn)來，沒有加這個(gè)參數(shù)，全部是引用的style-min.css這個(gè)壓縮之后的腳本。

當(dāng)然，你也可以任意發(fā)揮，比如在淘寶內(nèi)部，我們可以結(jié)合ucool方便切換源碼和非源碼，或者你可以在js腳本里面，把源碼的link標(biāo)記刪除掉，在動(dòng)態(tài)插入源碼的link等等。

總之，利用模塊化，可以很方便調(diào)試，定位出問題的代碼在哪個(gè)文件。

一些最佳實(shí)踐

首先，我務(wù)必要提醒大家，@import語法一定要仔細(xì)看。
基本上，以下幾種用法：

@import "./mod/mod1.css";
 
@import "f:/website/htdocs/xxx/assets/css/mod/mod2.css";
 
@import url("http://assets.taobaocdn.com/tbsp/tbsp.source.css");

這里，我們不推薦使用本地絕對(duì)路徑的引用方式，因?yàn)椴焕趫F(tuán)隊(duì)協(xié)作，相對(duì)目錄絕對(duì)夠用了，當(dāng)然css-combo是支持解析本地絕對(duì)路徑的。

至于直接@import線上的路徑，css-combo工具也是支持的，會(huì)幫你下載下來～

其他

為啥不直接用less

團(tuán)隊(duì)里面不是每人都會(huì)less，不是每個(gè)人都喜歡less。而且less不支持gbk編碼，還有上面提到的，調(diào)試需要引入一段js，很多情況下，開發(fā)套頁面的時(shí)候都保留了。。。其實(shí)，最根本的原因就是less和css combo解決的不是一類問題，less更多的是把css編程化，css combo只專注css模塊打包:)

好，先寫到這兒吧，思路比較亂，大家有問題歡迎提出，對(duì)于css combo工具有任何需求和bug，歡迎到github上提issue。