網(wǎng)站模塊化設(shè)計我已經(jīng)提過很多了,像《 從宜家的家具設(shè)計講模塊化 》、《 頁面重構(gòu)中的模塊化思維 》、《 頁面重構(gòu)中的組件制作要點 》都是跟模塊化相干的,不過之前一直沒有講到具體實現(xiàn)方面的內(nèi)容,只是一些思維。這次重點講一下實現(xiàn)方面的內(nèi)容,權(quán)當?shù)侥壳盀橹刮覍δK化的一些總結(jié)收拾。
要做好網(wǎng)站的模塊化,我感到懂得好樣式的作用域是很重要的,所以將這部分作為這個系列的第一篇。
寫過網(wǎng)站程序的同學應當都知道,變量是有作用域的(不知道的同學自己往問谷歌,這里就不作說明了),網(wǎng)站樣式的定義也同樣存在著作用域的標題,即定義的作用范疇,很輕易就能懂得,如下面的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)鍵的因素:
權(quán)值的大小跟選擇器的類型和數(shù)目有關(guān)
樣式的優(yōu)先級跟樣式的定義次序有關(guān)
懂得網(wǎng)站樣式的權(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è)計講模塊化 》中的例子,具體請移步。
再來說說“作用域”,信任大家很輕易就會想到“全局”、“公共”這些詞,關(guān)注過模塊化的同學應當都知道,網(wǎng)上說得最多的一種“模塊化”,就是像header、footer這樣的以大區(qū)域劃分。在往年web尺度交換會(頁面重構(gòu)公平化討論)上,克軍提出了“樣式的三層架構(gòu)”——公共規(guī)矩層、公共模塊層、項目層。這些都有它們實用的范疇,而且最大的長處是輕易懂得和利用。這里也不再做重訴了,感愛好的同學可以找找相干的文章。
我在這一塊的劃分上,有點類似克軍的“樣式的三層架構(gòu)”,有一點小的差別,我是以“作用域”來分的: 公共級(全局)、欄目級(局部公共)、頁面級 。如何劃分這個“作用域”呢?很簡略,全局的global就是公共級的;只在欄目中用到的局部global是屬于欄目級的;只影響單個頁面的就是屬于頁面級的了。
最后幾點要特別注意的:
除了標簽選擇器之外,哪些類是應用于公共級、欄目級中的,如
.tx_hit{color:#FF0000 !important;}的實用范疇是公共級的,應當放于全局的定義中。但,假如它只影響于某個欄目,那么就應當把它放于欄目級的作用域中。
標簽選擇器一般屬于欄目定義,有時會用于公共級作用域中,除了最基礎(chǔ)的reset之外,應盡可能少應用在公共級定義中
可持續(xù)的屬性定義應用時須注意影響的范疇,特別是在標簽選擇器中應用時