有不少同學覺得前面的內容過於簡單了，對於 樣式的作用域的分類 、 欄目級作用域 、 繼承 等內容的確十分基礎，不過基礎還是很重要的。下面就一起進入這個系列真正的主題——“模塊化”吧。
早在Qzone4.0的頁面架構中已經在項目中開始摸索提高代碼複用的方法，只不過當時並沒有很清晰的認識到“模塊化”這個思想。從去年的《 從宜家的傢俱設計講模塊化 》開始，模塊化成了我主要的一個學習方向。藉着無數的提問、思考、討論，漸漸形成了一個比較清晰的、較爲完整的方案。後面的內容，更多的是出於我在實際項目中總結出來的方法，雖然已經儘可能爲出現的問題提供瞭解決方法，不過還是少不了會有些我沒遇到過或沒考慮到的，歡迎各位指出。
首先來了解下頁面重構中模塊化的核心思想： 將HTML和CSS通過一定的規則進行分類、組合，以達到特定HTML、CSS在特定範圍內最大程度的複用。 有三個關鍵詞： 規則 、 特定範圍 、 最大程度的複用 。怎麼理解呢？
- 規則
- 編寫模塊時需要遵循的規範
- 特定範圍
- 模塊可使用的範圍。與樣式的作用域有關，大部分模塊的使用範圍僅僅是某一個欄目或站點。
- 最大程度的複用
- 做最少的修改即可重複使用。很多同學都把“複用”理解成不用修改的直接使用，但在頁面製作中，由於實際的項目環境，基本是不可能做到“一個模塊走天下”的。不同的欄目會有不同的需求，大家應該都多少有所體會，我就不多講了。
從實際出發，才能最終服務於實際。我們知道一個HTML標籤可以綁定多個樣式，所以我們可以這樣去定義一個模塊：
<div class="class-a class-b class-c">
...
</div>不少同學已經知道這個方法了，而且還很形像的稱之爲“拼樣式”。這樣的定義很容易引出其它的問題，比如樣式類的個數多少個適合？樣式類如何命名？等等。下面講下我的方法，從前面我們學到的樣式作用域及模塊化的核心思想，我們可以把樣式進行一個分類，像這樣：
.mode-a{/* 定義一個模塊 */}
.type-a{/* 模塊中的差異化定義 */}
.mode-name{/* 針對單個模塊的個性化定義 */}
<div class="mode-a type-a mode-name">
...
</div>上面的“mode-a”，我稱它叫爲“基類”；“type-a”爲“擴展類”；“mode-name”爲“模塊名”，作用分別是：
- 基類
- （基礎樣式）模塊的基礎表現。包含了模塊中大部分的狀態。
- 擴展類
- （擴展樣式）用於對使用基類的模塊進行小範圍的修改
- 模塊名
- 模塊在某一作用域中的唯一名稱。
這裏有一個 簡單的例子 可以幫助理解。
也有同學主張用ID去表示“模塊名”，我認爲這種方式擴展性比較差，而且很容易與開發的ID衝突，不過也不失爲一個方法。
