武林網(wǎng)(www.companysz.com)文章簡介:在OOCSS中怎么定義“對象”?
原文:(翻譯時(shí)為Version 28)
翻譯:ytzong
在OOCSS中怎么定義“對象”?
對象類似JAVA中的類,保持著OO的特征。
一個(gè)CSS對象由4部分組成:
這可能令人費(fèi)解,因?yàn)槊總€(gè)CSS class不是其自身必要的對象,但可以是一個(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>
對象是一個(gè)class為mod的模塊。包括4個(gè)部件節(jié)點(diǎn)(不能獨(dú)立于模塊外,包括2個(gè)區(qū)塊,inner和body,和兩個(gè)可選擇的區(qū)塊,head和foot)
OOCSS如何提升性能?
OOCSS具有雙倍的性能優(yōu)勢:
要用ID來對內(nèi)容寫樣式嗎?
當(dāng)你在同一頁面(或者同一站點(diǎn)同時(shí)緩存良好)復(fù)用一個(gè)對象時(shí),這是性能的“免費(fèi)贈品”。用ID來寫樣式在同一頁面中只能使用一次。@cgriego (twitter) 拿它與singletons比較過,我認(rèn)為非常精確。可能有些情況下你要用ID定義樣式,比如非常特殊的 header menus,此時(shí)你可以在用ID來沙箱(譯注:動名詞)特殊元素并確保此處的代碼不會影響站點(diǎn)的其它地方。選擇ID而非class前要三思,隨著站點(diǎn)的發(fā)展,真的很難預(yù)料其他人會怎么處理依據(jù)你的CSS所構(gòu)建的HTML。如有選擇的余地,盡可能的考慮擴(kuò)展性。
我正在考慮移除模板head, body, foot中的ID。某些人或許有多個(gè)主區(qū)域。站點(diǎn)的多個(gè)header 和 footer更難以猜測,但我敢打賭肯定有設(shè)計(jì)師會這樣想,所以ID很可能會消失(不太順,看原文: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.)。
另一方面,ID hooks are great for linking。放在HTML中,不過別用它們來寫樣式。
新聞熱點(diǎn)
疑難解答
圖片精選