網(wǎng)站模塊化設(shè)計(jì)我已經(jīng)提過(guò)很多了，像《 從宜家的家具設(shè)計(jì)講模塊化 》、《 頁(yè)面重構(gòu)中的模塊化思維 》、《 頁(yè)面重構(gòu)中的組件制作要點(diǎn) 》都是跟模塊化相干的，不過(guò)之前一直沒(méi)有講到具體實(shí)現(xiàn)方面的內(nèi)容，只是一些思維。這次重點(diǎn)講一下實(shí)現(xiàn)方面的內(nèi)容，權(quán)當(dāng)?shù)侥壳盀橹刮覍?duì)模塊化的一些總結(jié)收拾。
要做好網(wǎng)站的模塊化，我感到懂得好樣式的作用域是很重要的，所以將這部分作為這個(gè)系列的第一篇。
寫(xiě)過(guò)網(wǎng)站程序的同學(xué)應(yīng)當(dāng)都知道，變量是有作用域的（不知道的同學(xué)自己往問(wèn)谷歌，這里就不作說(shuō)明了），網(wǎng)站樣式的定義也同樣存在著作用域的標(biāo)題，即定義的作用范疇，很輕易就能懂得，如下面的p的作用域：
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo這個(gè)類(lèi)中*/ .demo p{color:#000000;}
樣式選擇器的優(yōu)先級(jí)是學(xué)習(xí)樣式的基礎(chǔ)知識(shí)，一起簡(jiǎn)略回想下：
標(biāo)簽的權(quán)值為0,0,0,1
類(lèi)的權(quán)值為0,0,1,0
屬性選擇的權(quán)值為0,0,1,1
ID的權(quán)值為0,1,0,0
important的權(quán)值為最高1,0,0,0
應(yīng)用的規(guī)矩也很簡(jiǎn)略，就是 選擇器的權(quán)值加到一起，大的優(yōu)先；假如權(quán)值雷同，后定義的優(yōu)先 。固然很簡(jiǎn)略，但假如書(shū)寫(xiě)的時(shí)候沒(méi)有注意，很輕易就會(huì)導(dǎo)致CSS的重復(fù)定義，代碼冗余。
從上面我們可以得出兩個(gè)關(guān)鍵的因素：
權(quán)值的大小跟選擇器的類(lèi)型和數(shù)目有關(guān)
樣式的優(yōu)先級(jí)跟樣式的定義次序有關(guān)
懂得網(wǎng)站樣式的權(quán)值后有什么作用呢？比如可以這樣用：舉一個(gè)最簡(jiǎn)略的例子，
body{color:#555555;}.demo{color:#000000;}
<p>這里的文字色彩受全局定義的影響</p>
<div class="demo"><p>這里的文字色彩受類(lèi)demo定義的影響</p></div>
<p class="demo">這里的文字色彩受類(lèi)demo定義的影響</p>
知道了樣式的權(quán)值，你就知道上面例子的表現(xiàn)是怎樣的了。進(jìn)一步的利用，就是模塊化了，比如《 從宜家的家具設(shè)計(jì)講模塊化 》中的例子，具體請(qǐng)移步。
再來(lái)說(shuō)說(shuō)“作用域”，信任大家很輕易就會(huì)想到“全局”、“公共”這些詞，關(guān)注過(guò)模塊化的同學(xué)應(yīng)當(dāng)都知道，網(wǎng)上說(shuō)得最多的一種“模塊化”，就是像header、footer這樣的以大區(qū)域劃分。在往年web尺度交換會(huì)（頁(yè)面重構(gòu)公平化討論）上，克軍提出了“樣式的三層架構(gòu)”——公共規(guī)矩層、公共模塊層、項(xiàng)目層。這些都有它們實(shí)用的范疇，而且最大的長(zhǎng)處是輕易懂得和利用。這里也不再做重訴了，感愛(ài)好的同學(xué)可以找找相干的文章。
我在這一塊的劃分上，有點(diǎn)類(lèi)似克軍的“樣式的三層架構(gòu)”，有一點(diǎn)小的差別，我是以“作用域”來(lái)分的： 公共級(jí)（全局）、欄目級(jí)（局部公共）、頁(yè)面級(jí) 。如何劃分這個(gè)“作用域”呢？很簡(jiǎn)略，全局的global就是公共級(jí)的；只在欄目中用到的局部global是屬于欄目級(jí)的；只影響單個(gè)頁(yè)面的就是屬于頁(yè)面級(jí)的了。
最后幾點(diǎn)要特別注意的：
除了標(biāo)簽選擇器之外，哪些類(lèi)是應(yīng)用于公共級(jí)、欄目級(jí)中的，如
.tx_hit{color:#FF0000 !important;}的實(shí)用范疇是公共級(jí)的，應(yīng)當(dāng)放于全局的定義中。但，假如它只影響于某個(gè)欄目，那么就應(yīng)當(dāng)把它放于欄目級(jí)的作用域中。
標(biāo)簽選擇器一般屬于欄目定義，有時(shí)會(huì)用于公共級(jí)作用域中，除了最基礎(chǔ)的reset之外，應(yīng)盡可能少應(yīng)用在公共級(jí)定義中
可持續(xù)的屬性定義應(yīng)用時(shí)須注意影響的范疇，特別是在標(biāo)簽選擇器中應(yīng)用時(shí)
