CSS模組化不是簡單的在CSS檔案中分幾塊，或者把css拆分成幾個小css檔案。CSS模組化的目的是讓css的可複用、可移植、可替換，實現的手段有封裝、繼承、多型，對於CSS模組化的封裝、繼承、多型的瞭解詳見 淺談CSS模組化 。對於大型專案的CSS模組化很重要，做的好以後的維護就很方便。

模組的程式碼塊要獨立，只依賴reset和全域性樣式，不依賴其它模組程式碼

       有時為了節省程式碼量多個模組公用背景，把共用一張背景的css放在一起定義背景圖片，程式碼不便於移植和維護。程式碼塊劃分要合理，允許合理的程式碼冗餘。

//背景，.mk-dialog input應該放到mk-dialog程式碼塊
.mk-dialog input, .gotop, titlebar{background:url(../img/bg.png) no-repeat}

//其它程式碼
...

//通用對話方塊程式碼
.mk-dialog{}

//功能模組
.module-a{}
.module-b{}
 

背景圖是否需要模組化

       如果頁面http請求數不是很多，建議把背景圖也做成模組化的，即一個模組是一個sprite，多個模組背景圖片別合併成到一起。通用模組背景要獨立，例如通用對話方塊相關的背景和頁面其它背景合併在一起就不好，一方面不好維護，另外可能某些頁面只用到了對話方塊，但卻要載入一張體積很大的背景圖。

模組劃分
       對於不是很複雜的專案按照頁面區域劃分模組已經夠了，但是複雜的專案(例如微博)還需要根據功能模組進行細分。
       不按照表現劃分模組，例如有四五個浮動層，不能因為樣式基本一樣把所有的樣式混在一起寫作為一個模組，如果說某個模組改樣式了修改會牽扯到別的模組，就比較麻煩。可以從表現上把通用的部分提取出來，然後分別去寫每個模組的程式碼。

通用模組和功能模組徹底分離，不耦合

//對話方塊樣式
.mk-dialog{}
//登陸對話方塊，不使用mk-dialog作為父類去寫功能模組的程式碼
.mk-dialog .login{}
 
//正確的模組定義
.login{}
.login input{}
.login prompt{}