重構(gòu)中的模塊化設(shè)計:樣式的作用域

很久沒有更新blog了，這段時間實在是發(fā)生了很多的事，累身累心。但還是有很多想做的事，比如更新merceCSS、把一直以來所總結(jié)的有關(guān)模塊化的內(nèi)容整理出來跟大家分享、參加交流會等等。

模塊化設(shè)計我已經(jīng)提過很多了，像《 從宜家的家具設(shè)計講模塊化 》、《 頁面重構(gòu)中的模塊化思維 》、《 頁面重構(gòu)中的組件制作要點 》都是跟模塊化相關(guān)的，不過之前一直沒有講到具體實現(xiàn)方面的內(nèi)容，只是一些思維。這次重點講一下實現(xiàn)方面的內(nèi)容，權(quán)當?shù)侥壳盀橹刮覍δK化的一些總結(jié)整理。

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

寫過程序的同學應該都知道，變量是有作用域的（不知道的同學自己去問谷歌，這里就不作解釋了），樣式的定義也同樣存在著作用域的問題，即定義的作用范圍，很容易就能理解，如下面的p的作用域：

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

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

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

• 標簽的權(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)先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導致CSS的重復定義，代碼冗余。

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

1. 權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)
2. 樣式的優(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)是怎樣的了。進一步的應用，就是模塊化了，比如《 從宜家的家具設(shè)計講模塊化 》中的例子，詳細請移步。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈