一区不卡国产视频,小黄片免费视频在线观看,国产这里有精品99,国产成人精品自产久久亚洲精品,亚洲国产电影二区

品優(yōu)網(wǎng)絡(luò) 十六年(2003-2018)專注
重構(gòu)中的模塊化設(shè)計(jì):樣式的作用域
日期:2014-12-26 作者:admin 來(lái)源: 瀏覽次數(shù):0 網(wǎng)友評(píng)論 0

企業(yè)網(wǎng)站推廣1

很久沒(méi)有更新blog了,這段時(shí)間實(shí)在是發(fā)生了很多的事,累身累心。但還是有很多想做的事,比如更新merceCSS、把一直以來(lái)所總結(jié)的有關(guān)模塊化的內(nèi)容整理出來(lái)跟大家分享、參加交流會(huì)等等。
模塊化設(shè)計(jì)我已經(jīng)提過(guò)很多了,像《 從宜家的家具設(shè)計(jì)講模塊化 》、《 頁(yè)面重構(gòu)中的模塊化思維 》、《 頁(yè)面重構(gòu)中的組件制作要點(diǎn) 》都是跟模塊化相關(guān)的,不過(guò)之前一直沒(méi)有講到具體實(shí)現(xiàn)方面的內(nèi)容,只是一些思維。這次重點(diǎn)講一下實(shí)現(xiàn)方面的內(nèi)容,權(quán)當(dāng)?shù)侥壳盀橹刮覍?duì)模塊化的一些總結(jié)整理。
要做好模塊化,我覺(jué)得理解好樣式的作用域是很重要的,所以將這部分作為這個(gè)系列的前幾篇。
寫過(guò)程序的同學(xué)應(yīng)該都知道,變量是有作用域的(不知道的同學(xué)自己去問(wèn)谷歌,這里就不作解釋了),樣式的定義也同樣存在著作用域的問(wèn)題,即定義的作用范圍,很容易就能理解,如下面的p的作用域:
/*作用域:全局*/ p{text-indent:2em;}
/*作用域:.demo這個(gè)類中*/ .demo p{color:#000000;}
樣式選擇器的優(yōu)先級(jí)是學(xué)習(xí)樣式的基礎(chǔ)知識(shí),一起簡(jiǎn)單回顧下:
標(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ī)則也很簡(jiǎn)單,就是 選擇器的權(quán)值加到一起,大的優(yōu)先;如果權(quán)值相同,后定義的優(yōu)先 。雖然很簡(jiǎn)單,但如果書寫的時(shí)候沒(méi)有注意,很容易就會(huì)導(dǎo)致CSS的重復(fù)定義,代碼冗余。
從上面我們可以得出兩個(gè)關(guān)鍵的因素:
權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān) 樣式的優(yōu)先級(jí)跟樣式的定義順序有關(guān)
了解樣式的權(quán)值后有什么作用呢?比如可以這樣用:舉一個(gè)更簡(jiǎn)單的例子,
body{color:#555555;}.demo{color:#000000;}
<p>這里的文字顏色受全局定義的影響</p>
<div><p>這里的文字顏色受類demo定義的影響</p></div>
<p>這里的文字顏色受類demo定義的影響</p>
知道了樣式的權(quán)值,你就知道上面例子的表現(xiàn)是怎樣的了。進(jìn)一步的應(yīng)用,就是模塊化了,比如《 從宜家的家具設(shè)計(jì)講模塊化 》中的例子,詳細(xì)請(qǐng)移步。

再來(lái)說(shuō)說(shuō)“作用域”,相信大家很容易就會(huì)想到“全局”、“公共”這些詞,關(guān)注過(guò)模塊化的同學(xué)應(yīng)該都知道,網(wǎng)上說(shuō)得更多的一種“模塊化”,就是像header、footer這樣的以大區(qū)域劃分。在去年web標(biāo)準(zhǔn)交流會(huì)(頁(yè)面重構(gòu)合理化討論)上,克軍提出了“樣式的三層架構(gòu)”——公共規(guī)則層、公共模塊層、項(xiàng)目層。這些都有它們適用的范圍,而且更大的優(yōu)點(diǎn)是容易理解和應(yīng)用。這里也不再做重訴了,感興趣的同學(xué)可以找找相關(guān)的文章。
我在這一塊的劃分上,有點(diǎn)類似克軍的“樣式的三層架構(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)簽選擇器之外,哪些類是使用于公共級(jí)、欄目級(jí)中的,如
.tx_hit{color:#FF0000 !important;}的適用范圍是公共級(jí)的,應(yīng)該放于全局的定義中。但,如果它只影響于某個(gè)欄目,那么就應(yīng)該把它放于欄目級(jí)的作用域中。 標(biāo)簽選擇器一般屬于欄目定義,有時(shí)會(huì)用于公共級(jí)作用域中,除了更基礎(chǔ)的reset之外,應(yīng)盡可能少使用在公共級(jí)定義中 可繼承的屬性定義使用時(shí)須注意影響的范圍,特別是在標(biāo)簽選擇器中使用時(shí) 接下來(lái)的內(nèi)容就是以這個(gè)為基礎(chǔ)的,希望大家能理解“樣式的作用域”,對(duì)于后繼內(nèi)容的理解會(huì)很有幫助。

重構(gòu)中的模塊化設(shè)計(jì):樣式的作用域,歡迎合作。

企業(yè)網(wǎng)站推廣2

查看更多寧波網(wǎng)站制作設(shè)計(jì)樣式重構(gòu)

寧波網(wǎng)站建設(shè) (http://m.sdjianlida.com/) 版權(quán)與免責(zé)聲明
    1、凡本網(wǎng)注明“來(lái)源:寧波品優(yōu)網(wǎng)絡(luò)”字樣的所有作品,版權(quán)均屬于浙江省寧波海曙品優(yōu)網(wǎng)絡(luò)技術(shù)有限公司,如需轉(zhuǎn)載、摘編或利用其它方式使用上述作品,請(qǐng)與本網(wǎng)聯(lián)系。
    2、凡本網(wǎng)注明“來(lái)源:XXX(非寧波品優(yōu)網(wǎng)絡(luò))”的作品,均轉(zhuǎn)載自其它媒體,轉(zhuǎn)載目的在于傳遞更多信息,并不代表本網(wǎng)贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)。寧波網(wǎng)站建設(shè)的轉(zhuǎn)載僅為信息的廣泛傳播,如有侵權(quán)請(qǐng)及時(shí)告之刪除。
返回:寧波網(wǎng)站制作