模塊化設(shè)計(jì)樣式的作用域

樣式選擇器的優(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)先 。雖然很簡單，但如果書寫的時(shí)候沒有注意，很容易就會導(dǎo)致CSS的重復(fù)定義，代碼冗余。

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

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

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

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

這里的文字顏色受全局定義的影響

這里的文字顏色受類demo定義的影響

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

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

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

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

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

網(wǎng)頁題目：模塊化設(shè)計(jì)樣式的作用域
URL地址：http://muchs.cn/news/170911.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、動(dòng)態(tài)網(wǎng)站、服務(wù)器托管

廣告

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