網站模塊化設計我已經提過很多了，像《 從宜家的家具設計講模塊化 》、《 頁面重構中的模塊化思維 》、《 頁面重構中的組件制作要點 》都是跟模塊化相干的，不過之前一直沒有講到具體實現方面的內容，只是一些思維。這次重點講一下實現方面的內容，權當到目前為止我對模塊化的一些總結收拾。

要做好網站的模塊化，我感到懂得好樣式的作用域是很重要的，所以將這部分作為這個系列的第一篇。

寫過網站程序的同學應當都知道，變量是有作用域的（不知道的同學自己往問谷歌，這里就不作說明了），網站樣式的定義也同樣存在著作用域的標題，即定義的作用范疇，很輕易就能懂得，如下面的p的作用域：

/*作用域：全局*/ p{text-indent:2em;}

/*作用域：.demo這個類中*/ .demo p{color:#000000;}

樣式選擇器的優先級是學習樣式的基礎知識，一起簡略回想下：

標簽的權值為0,0,0,1
類的權值為0,0,1,0
屬性選擇的權值為0,0,1,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之外，應盡可能少應用在公共級定義中
可持續的屬性定義應用時須注意影響的范疇，特別是在標簽選擇器中應用時