css模組化設計（精練的）

1.設計原則

（1）可複用能繼承要完整

 1.可複用：樣式看起來能不能複用，系統是否有很多的地方

 2.能繼承：這個模組寫完了，有a b c 的樣式，下一個模組用的是，可以用 a b c，還有可以覆蓋掉某一個

 3.要完成：不能只去寫樣式去抽出來，這樣太小了，需要看看是否有互動，等等，要完整性

（2）週期性迭代

1.優秀的程式碼是模仿出來的

2.優秀的程式碼是設計出來的

3.優秀的程式碼是重構出來的

需求在變，產品在變，是不是模組化是不是有不合理的部分，這樣需要不斷開發的過程中，不斷去迭代，

2.設計方法

（1）先整體後部分再顆粒化

 1.佈局級別：先看大局（譬如移動端的佈局，是怎麼去佈局，用這個佈局去抽象出來幾個模組）

 2.頁面級別：頁面頁面之間的關聯關係，譬如頁面之間有公共的樣式，這個時候佈局模組裡面的某一個樣式

3.功能級別：譬如很多頁面都有這個按鈕，但是按鈕的文字以及功能是不一樣的，這個時候可以站在一個大的角度去思考問題，

寫一個比較基礎的按鈕，通過繼承，重寫等方式去實現不同的按鈕，那麼這個基礎的按鈕就是一個功能元件了

4.業務級別：譬如頁面中返回按鈕，這個按鈕通過繼承功能按鈕，就可以變成一個業務元件了

從上面看的出來是通過大到小的一個思路去寫這個樣式的

（2）先抽象再具體

譬如很多頁面，有很多的模組，但是某一個模組其實是不一樣的，這個時候不要具體去看不同的，而是把這些都看成相同的東西，只不過隱藏，或者增加了某一些模組的東西，這就是就可以抽離出一個元件了，然後這個元件是通過繼承，重寫，配置等等，實現成具體的某一個模組，這就是先抽象再具體的原理了、

3.程式碼實現

說了上面這麼多，具體的實現是怎麼樣的

（1）基礎樣式

 reset.css layout.css element.css

這個三個樣式，第一個是很普遍的樣式，就是消除元素的一些樣式，第二個是佈局樣式，這個樣式的話是寫頁面的佈局的樣式

第三個樣式是功能樣式，譬如一個功能按鈕的樣式

（2）具體引用

 寫好以上的樣式的話，我們通過引入有兩種方式

1.global：普遍的引入方式

<style lang="scss">

@import "../element.css"

</style>

2.scope： 這種是為了防止相同名稱，但是保證樣式不一樣的情況下選用的方式

<style lang="scss" module>

@import "../element.css"

</style>

以上是基本的原理說明，下面會貼出程式碼，以及編寫的思路

1.佈局樣式

2.功能樣式。這裡有三個：一個按鈕，一個列表，一個面板

以上就是樣式的部分，樣式總結完了，接下來是總結js的寫法了