很久沒有更新blog了，這段時間實在是發生了很多的事，累身累心。但還是有很多想做的事，像是更新merceCSS、把一直以來所總結的有關模組化的內容整理出來跟大家分享、參加交流會等等。
模組化設計我已經提過很多了，像《從宜家的家具設計講模組化》、《頁面重構中的模組化思維》、《頁面重構中的組件製作要點》都是跟模組化相關的，不過之前一直沒有講到具體實現方面的內容，只是一些思維。這次重點講實現方面的內容，權當到目前為止我對模組化的一些總結整理。
要做好模組化，我覺得理解好樣式的作用域是很重要的，所以將這部分當作這個系列的第一篇。
寫過程式的同學應該都知道，變數是有作用域的（不知道的同學自己去問谷歌，這裡就不作解釋了），樣式的定義也同樣存在著作用域的問題，即定義的作用範圍，很容易就能理解，如下面的p的作用域：
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
樣式選擇器的優先順序是學習樣式的基礎知識，一起簡單回顧下：
使用的規則也很簡單，就是選擇器的權值加在一起，大的優先；如果權值相同，後定義的優先。雖然很簡單，但如果書寫的時候沒有註意，很容易就會導致CSS的重複定義，程式碼冗餘。
從上面我們可以得到兩個關鍵的因素：
了解樣式的權值後有什麼作用呢？例如可以這樣用：舉一個最簡單的例子，
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
知道了樣式的權值，你就知道上面例子的表現是怎麼樣的了。進一步的應用，就是模組化了，例如《從IKEA的家具設計講模組化》中的例子，詳細請移步。