原文:http://wiki.github.com/stubbornella/oocss/faq(翻譯時(shí)為Version 28)
翻譯:ytzong
在OOCSS中怎么定義“對(duì)象”?
對(duì)象類(lèi)似JAVA中的類(lèi),保持著OO的特征。
一個(gè)CSS對(duì)象由4部分組成:
可能是一個(gè)或多個(gè)DOM節(jié)點(diǎn)的HTML
由wrapper節(jié)點(diǎn)的class名開(kāi)始的CSS樣式聲明
類(lèi)似于背景圖片和顯示用的sprites組件以及
JavaScript行為,監(jiān)聽(tīng)或者與對(duì)象關(guān)聯(lián)的方法
這可能令人費(fèi)解,因?yàn)槊總€(gè)CSS class不是其自身必要的對(duì)象,但可以是一個(gè)wrapper class的一個(gè)部件。比如:
<div class="mod">
<div class="inner">
<div class="hd">Block Head</div>
<div class="bd">Block Body</div>
<div class="ft">Block Foot</div>
</div>
</div>
對(duì)象是一個(gè)class為mod的模塊。包括4個(gè)部件節(jié)點(diǎn)(不能獨(dú)立于模塊外,包括2個(gè)區(qū)塊,inner和body,和兩個(gè)可選擇的區(qū)塊,head和foot)
OOCSS如何提升性能?
OOCSS具有雙倍的性能優(yōu)勢(shì):
高度重用的CSS代碼,只需要很少的CSS代碼,意味著:
更小的文件,從而更快的傳輸
CSS代碼在站點(diǎn)頁(yè)面中調(diào)用的比重增大則有希望被復(fù)用或被瀏覽器緩存
就瀏覽器而言更少的重繪和布局計(jì)算
單個(gè)頁(yè)面,CSS規(guī)則復(fù)用的越多,渲染引擎花在“computed values”的計(jì)算時(shí)間越少
手動(dòng)增加的"extending"類(lèi),重寫(xiě)更少的規(guī)則,這再一次意味著引擎做很少去應(yīng)用規(guī)則
要用ID來(lái)對(duì)內(nèi)容寫(xiě)樣式嗎?
當(dāng)你在同一頁(yè)面(或者同一站點(diǎn)同時(shí)緩存良好)復(fù)用一個(gè)對(duì)象時(shí),這是性能的“免費(fèi)贈(zèng)品”。用ID來(lái)寫(xiě)樣式在同一頁(yè)面中只能使用一次。@cgriego (twitter) 拿它與singletons比較過(guò),我認(rèn)為非常精確。可能有些情況下你要用ID定義樣式,比如非常特殊的 header menus,此時(shí)你可以在用ID來(lái)沙箱(譯注:動(dòng)名詞)特殊元素并確保此處的代碼不會(huì)影響站點(diǎn)的其它地方。選擇ID而非class前要三思,隨著站點(diǎn)的發(fā)展,真的很難預(yù)料其他人會(huì)怎么處理依據(jù)你的CSS所構(gòu)建的HTML。如有選擇的余地,盡可能的考慮擴(kuò)展性。
我正在考慮移除模板head, body, foot中的ID。某些人或許有多個(gè)主區(qū)域。站點(diǎn)的多個(gè)header 和 footer更難以猜測(cè),但我敢打賭肯定有設(shè)計(jì)師會(huì)這樣想,所以ID很可能會(huì)消失(不太順,看原文:Someone could have multiple main content areas. Multiple site headers and footers are more difficult to imagine, but I bet there is a designer who can dream up something like that, so the IDs are very likely to disappear.)。
新聞熱點(diǎn)
疑難解答
圖片精選