3.樣式層（Style）
1、全局、模塊和頁(yè)面級(jí)
a）土豆網(wǎng)的所有頁(yè)面都應(yīng)用了全局樣式global.css（簡(jiǎn)寫(xiě)為_(kāi)g.css），位于“/skin/g/_g.css”；該樣式文件包含了包括主要布局、導(dǎo)航條、盒狀模型、包裝模型以及常用工具類(lèi)；
b）所有位于一級(jí)導(dǎo)航以及類(lèi)似風(fēng)格的頁(yè)面使用的是公眾樣式，位于“/skin/public/v.css”；所有內(nèi)頁(yè)管理使用的是內(nèi)頁(yè)樣式，，位于“/skin/my/v.css”；
c）所有獨(dú)立頁(yè)面使用自己獨(dú)有的樣式文件，命名以頁(yè)面功能或所在模塊為基準(zhǔn)；
d）頁(yè)面樣式的基本原則是：如果某一特定頁(yè)面樣式的代碼超過(guò)整個(gè)文件的1/3，會(huì)被獨(dú)立成為單個(gè)的樣式文件。否則，通常會(huì)合并在其頁(yè)面所在的模塊中；
c）特別少量的樣式，可以寫(xiě)在頁(yè)面HEAH區(qū)域，或者寫(xiě)在HTML，并沒(méi)有特別苛刻的要求，這是出于對(duì)當(dāng)前項(xiàng)目效率的考量。
舉一些例子：
-首頁(yè)
/skin/g/_g.css（全局風(fēng)格）
/skin/public/index.css（公眾區(qū)域的首頁(yè)風(fēng)格）
-視頻首頁(yè)
/skin/g/_g.css（全局風(fēng)格）
/skin/public/v.css（公眾區(qū)域的模塊風(fēng)格）
-我的視頻
/skin/g/_g.css（全局風(fēng)格）
/skin/my/v.css（內(nèi)頁(yè)管理界面模塊風(fēng)格）
/skin/my/clips.css（我的視頻頁(yè)面級(jí)風(fēng)格）
/skin/playlist/append.css（分享視頻的Toolkit封裝）
-視頻播放頁(yè)面
/skin/video/v.css（重點(diǎn)獨(dú)立頁(yè)面，特殊優(yōu)化，合并了_g.css等樣式）
2、抽象與實(shí)例、繼承和重載
a）全站級(jí)別的繼承和重載機(jī)制；
因?yàn)樯婕叭值臉邮蕉急环庋b在Global.css里，如果在模塊級(jí)或者頁(yè)面級(jí)需要對(duì)該樣式加以調(diào)整，辦法是重寫(xiě)相關(guān)的類(lèi)；
以下示例清晰地展示了一個(gè)視頻包（Pack）在類(lèi)的繼承和重載的情況：

* 是一個(gè)全局樣式，規(guī)定了所有邊距的重置；
.pack 是一個(gè)抽象的包封裝，該類(lèi)記錄了所有包的共性，其代碼如下?？盏念?lèi)可能會(huì)在一些生僻的瀏覽器上造成意外的問(wèn)題，但是通常不會(huì)，這里書(shū)寫(xiě)空類(lèi)是為了保證在邏輯上的可閱讀性。
.pack { float:left; }
.pack ul {}
.pack li {list-style:none;}
.pack b { font-weight:normal;color:#686868;font-size:11px;font-family:Arial; }
在.pack下，書(shū)寫(xiě)了所有包裝模型的實(shí)力類(lèi)：.pack_clip, .pack_user, .pack_album, .pack_list，等等；
以下是視頻包和豆單包的例子：
.pack_clip {
padding:12px 10px;
color:#000;width:126px;
}
.pack_list {
padding:12px 3px;
color:#000;width:144px;
}
以上類(lèi)的抽象和繼承主要體現(xiàn)在對(duì)各自私有部分的派生。以實(shí)現(xiàn)代碼的精簡(jiǎn)和復(fù)用性。
在一個(gè)HTML片段中，調(diào)用的方法是：首先應(yīng)用抽象類(lèi)或者父類(lèi)，然后應(yīng)用實(shí)力類(lèi)或者子類(lèi)，例如：
<div class="pack pack_user director"></div>
在這個(gè)例子中，director代表豆角，這個(gè)類(lèi)可能書(shū)寫(xiě)在某個(gè)模塊中，也可能在頁(yè)面級(jí)的樣式中，對(duì)前面的類(lèi)進(jìn)一步重寫(xiě)和修正；
修正的時(shí)候只需要書(shū)寫(xiě)需要被修改或者重置的語(yǔ)句就可以了。
在上面的示例中，因?yàn)轫?yè)面的需要，模塊級(jí)別的/skin/public/v.css重寫(xiě)了pack_clip的寬度：
#programpage .pack_clip{width:167px;}
當(dāng)父類(lèi)和抽象類(lèi)被修改的時(shí)候，全站的所有Pack模型都會(huì)被修正，但是不影響到子類(lèi)所做出的私有派生或者復(fù)寫(xiě)，也就不會(huì)影響某一個(gè)特殊頁(yè)面的獨(dú)立樣式；
關(guān)于類(lèi)、抽象和繼承的方法很多，考慮到命名方法和選擇符，會(huì)有大量不同的處理風(fēng)格。然而最主要的思想都在各種面向?qū)ο蟮木幊虝?shū)籍中有詳細(xì)的技巧和說(shuō)明，這里就不復(fù)述了。
在土豆網(wǎng)的樣式中，大量應(yīng)用了類(lèi)似的辦法和技巧來(lái)處理可維護(hù)、可擴(kuò)展和可復(fù)用性。
TIPS：

前端開(kāi)發(fā)眼下最好的開(kāi)發(fā)工具是Firebug，很好，很強(qiáng)大； 樣式命名很重要，優(yōu)先考慮以類(lèi)（class）為基礎(chǔ)，輕易不使用標(biāo)識(shí)（ID），標(biāo)識(shí)（ID）通常用于頁(yè)面級(jí)樣式所需要的元素，乃至一個(gè)細(xì)節(jié)上最終端的元素； 元素選擇符也很重要，“.pack_clip ul li a img {}”有著很高的優(yōu)先權(quán)，要慎用； 以上兩點(diǎn)歸納起來(lái)說(shuō)就是：盡量降低各種命名和選擇符的優(yōu)先權(quán)，越是全局和抽象優(yōu)先權(quán)應(yīng)該最低，在一個(gè)特定的微觀元素部分，可以放心使用高優(yōu)先權(quán)來(lái)復(fù)寫(xiě)；當(dāng)出現(xiàn)三層甚至五層的集成和復(fù)寫(xiě)的時(shí)候，這就會(huì)顯得相當(dāng)重要，如果不能很好地重寫(xiě)，輕易不要使用important，而是想辦法重構(gòu)父類(lèi)（的命名和選擇符）； 為了處理可擴(kuò)展性，會(huì)稍微增加HTML結(jié)構(gòu)的冗余性，然而從整體上來(lái)看，是值得的； 最終管理、處置和使用這些架構(gòu)的是人。

4. 行為層（Behavior）
待續(xù)

最新評(píng)論