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

寫過程序的同學(xué)應(yīng)該都知道，變量是有作用域的，樣式的定義也同樣存在著作用域的問題，即定義的作用范圍，很容易就能理解，如下面的p的作用域：

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

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

樣式選擇器的優(yōu)先級是學(xué)習(xí)樣式的基礎(chǔ)知識，一起簡單回顧下：

標(biāo)簽的權(quán)值為0,0,0,1
    類的權(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

使用的規(guī)則也很簡單，就是 選擇器的權(quán)值加到一起，大的優(yōu)先；如果權(quán)值相同，后定義的優(yōu)先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導(dǎo)致CSS的重復(fù)定義，代碼冗余。

從上面我們可以得出兩個關(guān)鍵的因素：

權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)
    樣式的優(yōu)先級跟樣式的定義順序有關(guān)

了解樣式的權(quán)值后有什么作用呢？比如可以這樣用：舉一個最簡單的例子，

body{color:#555555;}.demo{color:#000000;}

<p>這里的文字顏色受全局定義的影響</p>
<div class="demo"><p>這里的文字顏色受類demo定義的影響</p></div>
<p class="demo">這里的文字顏色受類demo定義的影響</p>

知道了樣式的權(quán)值，你就知道上面例子的表現(xiàn)是怎樣的了。進一步的應(yīng)用，就是模塊化了，比如《 從宜家的家具設(shè)計講模塊化 》中的例子，詳細請移步。

再來說說“作用域”，相信大家很容易就會想到“全局”、“公共”這些詞，關(guān)注過模塊化的同學(xué)應(yīng)該都知道，網(wǎng)上說得最多的一種“模塊化”，就是像header、footer這樣的以大區(qū)域劃分。在去年web標(biāo)準(zhǔn)交流會（頁面重構(gòu)合理化討論）上，克軍提出了“樣式的三層架構(gòu)”——公共規(guī)則層、公共模塊層、項目層。這些都有它們適用的范圍，而且大的優(yōu)點是容易理解和應(yīng)用。這里也不再做重訴了，感興趣的同學(xué)可以找找相關(guān)的文章。

我在這一塊的劃分上，有點類似克軍的“樣式的三層架構(gòu)”，有一點小的差別，我是以“作用域”來分的： 公共級（全局）、欄目級（局部公共）、頁面級 。如何劃分這個“作用域”呢？很簡單，全局的global就是公共級的；只在欄目中用到的局部global是屬于欄目級的；只影響單個頁面的就是屬于頁面級的了。

最后幾點要特別注意的：

除了標(biāo)簽選擇器之外，哪些類是使用于公共級、欄目級中的，如

.tx_hit{color:#FF0000 !important;}

的適用范圍是公共級的，應(yīng)該放于全局的定義中。但，如果它只影響于某個欄目，那么就應(yīng)該把它放于欄目級的作用域中。
    標(biāo)簽選擇器一般屬于欄目定義，有時會用于公共級作用域中，除了最基礎(chǔ)的reset之外，應(yīng)盡可能少使用在公共級定義中
    可繼承的屬性定義使用時須注意影響的范圍，特別是在標(biāo)簽選擇器中使用時

網(wǎng)頁名稱：重構(gòu)中樣式的作用域，模塊化設(shè)計樣式的作用域
URL標(biāo)題：http://www.rwnh.cn/news11/166261.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、做網(wǎng)站、用戶體驗、網(wǎng)站導(dǎo)航、網(wǎng)站排名、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)