CSS模組化的幾個細節討論

       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{}