設計原則
a、可複用能繼承要完整
b、週期性迭代
設計方法
a、先整體後部分再顆粒化
b、先抽象再具體
a、可複用能繼承要完整
例圖1
比如拿到這個設計圖，來思考css的模塊設計。
這兩個
可能覺得這兩個地方可做模塊。但是翻其他地方，這種看上去長得很相似，功能點小，其他地方又找不出有用這種樣式的，就不能叫做可複用，所以不要拆除出來。
而單看字體，左黑右紅，這個地方太小了不完整，不具備有交互、有樣式、有內容的特點。
能繼承的意思是，這個模塊寫完，有abcd的東西，下一個模塊拿來用除了有abcd，還能自己覆蓋某一個，比如說把d給覆蓋。
b、週期性迭代
三種觀點
現在的代碼的模塊化設計是針對當前產品需求思考出來，隨着產品的變化，要思考之前的模塊化是不是可以修改。
有些人在之後覺得之前的模塊化設計的不合理也不管，遇到的所有問題都是因爲沒有週期性迭代。
比如說根據當前需求設計了5個模塊。之後拿到需求要思考這5個模塊是要修改，還是要增加。
要用這種迭代的方式，控制代碼。
設計方法
示意圖
佈局
項目是針對移動端的，首先考慮佈局，這個是和頁面無關的，比如說是flex佈局，還是浮動佈局，還是grid佈局。要決定一個大方向，因爲方向決定css的寫法，要整體考慮佈局的樣式，成爲模塊抽象出來。然後根據這個產品需求，劃分多少頁面，每個頁面該如何區分和隔離樣式。
頁面
比如說A和B兩個頁面的相似度高，它們中間有很多樣式上可重用型的代碼，要考慮如何抽離開分這種模塊化，這時候考慮是頁面級別的，而不是佈局了，因爲佈局已經單獨拿出去了。
比如說 大多數是列表，兩欄佈局，還有垂直列表。這個時候會把列表式的佈局，都拿到佈局上去，而在考慮頁面的時候，關心的是模塊，比如說兩大模塊，上下各一個頭，這個是單獨拿出去，這種是頁面級別。
功能
針對某一個頁面上來說，比如按鈕。把它當成一個功能組件，而不是頁面組件。雖然文案、行爲不同，但是在CSS模塊時，考慮的是它的樣式是否是一樣的。它的設計原則是可繼承，三個按鈕的背景色或者邊框不一樣，但是站在功能角度上來說，用css寫出一個按鈕來，至於按鈕上寫什麼文字，什麼顏色，這些都是填充、可繼承的。
業務
業務是最後的顆粒化，具體到某一項的功能、邏輯、交互上了，比如說移動端上的返回，返回在形式上叫按鈕、或者說叫一個鏈接，這個回退就是我們所說的功能組件，在功能上抽象出來，在業務上繼承剛剛所說的那個功能UI，但是它有具體的邏輯，比如說點返回，跳轉到某一個頁面，或者點擊彈出某個彈窗。這種已經和業務耦合了，這種顆粒化要放在當前的業務裏，比如說vue: 它有template還有script和style，這裏的樣式就該放到style中了。
先整體是考慮整體的佈局，後部分是說下一個維度，考慮頁面與頁面之間的關係。第三個考慮某一個頁面上，或者說脫離了頁面中的具有功能性的樣式模塊，最後一個是涉及到某個頁面某個組件中的具體樣式。
比如說按鈕抽象出來一個樣式，不管裏面是什麼，在具體的style裏，可以覆蓋抽象的模塊樣式，可改邊距等等，這就是顆粒化了，在這個程度上，基本上不能再複用了，或者說複用的可能性不大了。
方法2
比如說拿到這個頁，我們原則是先抽象再具體。
抽象是把某些看着長得不一樣的東西，抽象成一個統一的模塊，這個模塊通過隱藏、變量配置，來達到具體的內容。
比如說底部按鈕欄可抽象成一個橫向列表。這個橫向列表再抽象，橫向列表和縱向列表都屬於列表，設計模塊的時候，通過配置選項，能讓一個列表是橫向還是縱向的，等於把這兩個相似又不相同的抽象出一個叫做列表的東西。
css樣式表設計
reset.scss：
瀏覽器不同，對默認的標籤有默認的樣式，爲了表現統一化，要加一個這個。
layout.scss:
佈局抽象成這個
element.scss:
列表、按鈕
global的方式引用，比如說直接把某個模塊引用進來，然後就可以寫具體的樣式了。
scope就是用的module方法。比如說兩個組件都叫做.btn，這樣在之前會導致兩個樣式的名稱一致，會被覆蓋，如果想用相同的名稱，樣式不一樣，就要用css module這樣就不一致，因爲編譯出來的class帶了一串編碼。
【關於模塊化的css設計代碼部分】
layout.scss
element.scss
作者：八寶君
鏈接：https://www.jianshu.com/p/f91363472eda
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。