模塊化設計我已經提過很多了，像《 從宜家的傢俱設計講模塊化 》、《 頁面重構中的模塊化思維 》、《 頁面重構中的組件製作要點 》都是跟模塊化相關的，不過之前一直沒有講到具體實現方面的內容，只是一些思維。這次重點講一下實現方面的內容，權當到目前爲止我對模塊化的一些總結整理。
要做好模塊化，我覺得理解好樣式的作用域是很重要的，所以將這部分作爲這個系列的第一篇。
寫過程序的同學應該都知道，變量是有作用域的（不知道的同學自己去問谷歌，這裏就不作解釋了），樣式的定義也同樣存在着作用域的問題，即定義的作用範圍，很容易就能理解，如下面的p的作用域：
/*作用域：全局*/ p{text-indent:2em;}/*作用域：.demo這個類中*/ .demo p{color:#000000;}樣式選擇器的優先級是學習樣式的基礎知識，一起簡單回顧下：
- 通配選擇符的權值 0,0,0,0
- 標籤的權值爲 0,0,0,1
- 類的權值爲 0,0,1,0
- 屬性選擇的權值爲 0,0,1,1 0,0,1,0
- 僞類選擇的權值爲 0,0,1,0
- 僞對象選擇的權值爲 0,0,0,1
- ID的權值爲 0,1,0,0
- important的權值爲最高 1,0,0,0
使用的規則也很簡單，就是 選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導致CSS的重複定義，代碼冗餘。
從上面我們可以得出兩個關鍵的因素：
- 權值的大小跟選擇器的類型和數量有關
- 樣式的優先級跟樣式的定義順序有關
瞭解樣式的權值後有什麼作用呢？比如可以這樣用：舉一個最簡單的例子，
body{color:#555555;}.demo{color:#000000;}
<p>這裏的文字顏色受全局定義的影響</p>
<div class="demo"><p>這裏的文字顏色受類demo定義的影響</p></div>
<p class="demo">這裏的文字顏色受類demo定義的影響</p>知道了樣式的權值，你就知道上面例子的表現是怎樣的了。進一步的應用，就是模塊化了，比如《 從宜家的傢俱設計講模塊化 》中的例子，詳細請移步。
再來說說“作用域”，相信大家很容易就會想到“全局”、“公共”這些詞，關注過模塊化的同學應該都知道，網上說得最多的一種“模塊化”，就是像header、footer這樣的以大區域劃分。在去年web標準交流會（頁面重構合理化討論）上，克軍提出了“樣式的三層架構”——公共規則層、公共模塊層、項目層。這些都有它們適用的範圍，而且最大的優點是容易理解和應用。這裏也不再做重訴了，感興趣的同學可以找找相關的文章。
我在這一塊的劃分上，有點類似克軍的“樣式的三層架構”，有一點小的差別，我是以“作用域”來分的： 公共級（全局）、欄目級（局部公共）、頁面級 。如何劃分這個“作用域”呢？很簡單，全局的global就是公共級的；只在欄目中用到的局部global是屬於欄目級的；隻影響單個頁面的就是屬於頁面級的了。
最後幾點要特別注意的：
- 除了標籤選擇器之外，哪些類是使用於公共級、欄目級中的，如
的適用範圍是公共級的，應該放於全局的定義中。但，如果它隻影響於某個欄目，那麼就應該把它放於欄目級的作用域中。.tx_hit{color:#FF0000 !important;} - 標籤選擇器一般屬於欄目定義，有時會用於公共級作用域中，除了最基礎的reset之外，應儘可能少使用在公共級定義中
- 可繼承的屬性定義使用時須注意影響的範圍，特別是在標籤選擇器中使用時
- 同類選擇器無加權
接下來的內容就是以這個爲基礎的，希望大家能理解“樣式的作用域”，對於後繼內容的理解會很有幫助。