快速业务通道

CSS教程:面向对象CSS FAQ

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-01

原文:http://wiki.github.com/stubbornella/oocss/faq(翻译时为Version 28)
翻译:ytzong

在OOCSS中怎么定义“对象”?

对象类似JAVA中的类,保持着OO的特征。

一个CSS对象由4部分组成:

  1. 可能是一个或多个DOM节点的HTML
  2. 由wrapper节点的class名开始的CSS样式声明
  3. 类似于背景图片和显示用的sprites组件以及
  4. JavaScript行为,监听或者与对象关联的方法

这可能令人费解,因为每个CSS class不是其自身必要的对象,但可以是一个wrapper class的一个部件。比如:

<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>

对象是一个class为mod的模块。包括4个部件节点(不能独立于模块外,包括2个区块,inner和body,和两个可选择的区块,head和foot)

OOCSS如何提升性能?

OOCSS具有双倍的性能优势:

  1. 高度重用的CSS代码,只需要很少的CSS代码,意味着:
    • 更小的文件,从而更快的传输
    • CSS代码在站点页面中调用的比重增大则有希望被复用或被浏览器缓存
  2. 就浏览器而言更少的重绘和布局计算
    • 单个页面,CSS规则复用的越多,渲染引擎花在“computed values”的计算时间越少
    • 手动增加的"extending"类,重写更少的规则,这再一次意味着引擎做很少去应用规则

要用ID来对内容写样式吗?

当你在同一页面(或者同一站点同时缓存良好)复用一个对象时,这是性能的“免费赠品”。用ID来写样式在同一页面中只能使用一次。@cgriego (twitter) 拿它与singletons比较过,我认为非常精确。可能有些情况下你要用ID定义样式,比如非常特殊的 header menus,此时你可以在用ID来沙箱(译注:动名词)特殊元素并确保此处的代码不会影响站点的其它地方。选择ID而非class前要三思,随着站点的发展,真的很难预料其他人会怎么处理依据你的CSS所构建的HTML。如有选择的余地,尽可能的考虑扩展性。

我正在考虑移除模板head, body, foot中的ID。某些人或许有多个主区域。站点的多个header 和 footer更难以猜测,但我敢打赌肯定有设计师会这样想,所以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中,不过别用它们来写样式。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号