1. 設計原則
1) 可復用能繼承完整
除了復用，完整，能繼承是什麼意思呢？比如我乙個模組寫完了有a,b,c三種樣式,當下乙個模組去使用的時候，它除了能用a,b,c三種樣式外，可以去覆蓋某個比如c的樣式。
2) 週期性迭代
是指針對當下的需求,不是先思考2個月，3個月，在動手，也不是不斷去重構，一遍又一遍推翻重來，這不現實，唯一 能做到好的就是，今天根據當前需求設計5個模組,當明天有的需求的時候，就要反思，我之前的模組是需要合併還是增加，通過這種迭代，永遠控制著**質量，讓你的模組設計更加的規範和完美。
2. 設計方法
1) 先整體後部分在顆粒化
既然是模組化設計,那你肯定要先顧大局,比如你的專案是針對移動端,移動端首先要考慮的是布局，布局是跟頁面無關的，比如你是流布局,grid布局,先確定乙個大方向，這個方向直接決定了你css寫法，所以要整體考慮布局的樣式，把這樣的樣式單獨的模組化出來，然後根據需求劃分多少頁面，每個頁面又該如何去區分跟隔離樣式，比如a,b兩個頁面相似度很高,那麼它們中間有很多可重用性**，你要考慮這兩個頁面之間去抽離拆分這種模組化，這個時候就是考慮頁面級別的，在考慮頁面的時候就不需要在關心頁面布局了。
功能級別的就是針對每乙個頁面來說，比如按鈕，這個按鈕是不是可以單獨的拿出去，把它單獨拿出去，把它做為是一種功能元件，而不是業務元件。就是說，我做的是乙個按鈕，哪怕當前這個頁面顯示的是提交，刪除，它的明暗，動作可能不同，但是在css模組設計的時候，考慮的是它的樣式長得一不一樣，換句說，按照剛才說的可復用能繼承完整，如果上功能圖上有三個按鈕，一樣嗎？它們長得不一樣，背景色不一樣，邊框不一樣，字型可能也不一樣，這個時候要站在功能的角度上講，用css寫出乙個按鈕來，這個按鈕顯示的 什麼文字，背景色是多少 這些是可繼承的也是可覆蓋的。
業務上就是要繼承功能上所設計的ui,當前需要的樣式就是寫在當前這個頁面裡面。
2)先抽象再具體
如上圖，抽象是說看著長得不一樣東西，抽象成乙個統一的模組，這個模組通過隱藏，配置達到具體的內容
css模組化例子 (使用sass語法)
布局基類 layout.scss
因為是移動端，使用flex布局,主要用法sass的mixin方法，引數主要有兩個，第乙個引數是指方向，橫向還是豎直方向，第二個主要是指行內還是塊級的
元素基類 element.scss
以上是通過 學習總結，如總結有過分之處，請見諒
願你成為終身學習者
重溫前端之模組化
最開始，並沒有出現模組化規範，一般使用一種 module 模式來解決 js 作用域汙染問題 jq 比較出名 let mymodule function window return 將函式暴露 window 第一種比較規範的規範出現 nodejs 是主要實踐者，使用 exports require 進...
前端模組化
前端模組化解決什麼問題？有了模組，我就可以很方便的使用別人的 想要什麼功能，就用載入什麼模組。但是，這樣做需要有乙個前提，那就是大家必須以同樣的方式編寫模組，否則就亂套了。所以組內需要有一套統一的模組規範。如何實現模組？1 物件字面量的變體 2 js設計模式的模組模式 3 採用成熟的庫檔案。前兩種方...
前端模組化
定義 具有相同屬性和行為的事物的集合 在前端中 將一些屬性比較類似和行為比較類似的內容放在同乙個js檔案裡面，把這個js檔案稱為模組 目的 為了每個js檔案只關注與自身有關的事情，讓每個js檔案各行其職 模組化 指的就是遵守commonjs規範，解決不同js模組之間相互呼叫問題 commonjs a...