樣式的作用域──頁面重構中的模塊化設計(一)
模塊化設計我已經提過很多了,像《?從宜家的家具設計講模塊化》、《?頁面重構中的模塊化思維》、《?頁面重構中的組件制作要點》都是跟模塊化相關的,不過之前一直沒有講到具體實現方面的內容,只是一些思維。這次重點講一下實現方面的內容,權當到目前為止我對模塊化的一些總結整理。
要做好模塊化,我覺得理解好樣式的作用域是很重要的,所以將這部分作為這個系列的第一篇。
寫過程序的同學應該都知道,變量是有作用域的(不知道的同學自己去問谷歌,這里就不作解釋了),樣式的定義也同樣存在著作用域的問題,即定義的作 用范圍,很容易就能理解,如下面的p的作用域:
view plaincopy to clipboardprint?
- /*作用域:全局*/?p{text-indent:2em;}
- /*作用域:.demo這個類中*/?.demo?p{color:#000000;}
樣式選擇器的優先級是學習樣式的基礎知識,一起簡單回顧下:
- 標簽的權值為0,0,0,1
- 類的權值為0,0,1,0
- 屬性選擇的權值為0,0,1,1
- ID的權值為0,1,0,0
- important的權值為最高1,0,0,0
使用的規則也很簡單,就是?選擇器的權值加到一起,大的優先;如果權值相同,后定義的優先 。雖然很簡單,但如果書寫的時候沒有注意,很容易就會導致CSS的重復定義,代碼冗余。
從上面我們可以得出兩個關鍵的因素:
- 權值的大小跟選擇器的類型和數量有關
- 樣式的優先級跟樣式的定義順序有關
了解樣式的權值后有什么作用呢?比如可以這樣用:舉一個最簡單的例子,
view plaincopy to clipboardprint?
- p{color:#555555;}.demo{color:#000000;}
view plaincopy to clipboardprint?
- <p>這里的文字顏色受全局定義的影響</p>
- <div><p>這里的文字顏色受類demo定義的影響</p></div>
- <p>這里的文字顏色受類demo定義的影響</p>
知道了樣式的權值,你就知道上面例子的表現是怎樣的了。進一步的應用,就是模塊化了,比如《?從宜家的家具設計講 模塊化 》中的例子,詳細請移步。
再來說說“作用域”,相信大家很容易就會想到“全局”、“公共”這些詞,關注過模塊化的同學應該都知道,網上說得最多的一種“模塊化”,就是像 header、footer這樣的以大區域劃分。在去年web標準交流會(頁面重構合理化討論)上,克軍提出了“樣式的三層架構”——公共規則層、公共模 塊層、項目層。這些都有它們適用的范圍,而且最大的優點是容易理解和應用。這里也不再做重訴了,感興趣的同學可以找找相關的文章。
我在這一塊的劃分上,有點類似克軍的“樣式的三層架構”,有一點小的差別,我是以“作用域”來分的:?公共級(全局)、欄目級 (局部公共)、頁面級 。如何劃分這個“作用域”呢?很簡單,全局的global就是公共級的;只在欄目中用到的局部global是屬于欄目級的;只影響單個頁面的就是屬于頁面 級的了。
最后幾點要特別注意的:
- 除了標簽選擇器之外,哪些類是使用于公共級、欄目級中的,如
view plaincopy to clipboardprint?
- .tx_hit{color:#FF0000?!important;}
的適用范圍是公共級的,應該放于全局的定義中。但,如果它只影響于某個欄目,那么就應該把它放于欄目級的作用域中。
- 標簽選擇器一般屬于欄目定義,有時會用于公共級作用域中,除了最基礎的reset之外,應盡可能少使用在公共級定義中
- 可繼承的屬性定義使用時須注意影響的范圍,特別是在標簽選擇器中使用時
接下來的內容就是以這個為基礎的,希望大家能理解“樣式的作用域”,對于后繼內容的理解會很有幫助。
來源:http://isd.tencent.com/?p=1864
大牛,程序員部落歡迎你
大神,受教了