当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
CSS教程:面向对象CSS FAQ | |||
2009-10-28 11:51:20 文/ytzong 出处:Version | |||
在OOCSS中怎么定义“对象”? 对象类似JAVA中的类,保持着OO的特征。 一个CSS对象由4部分组成:
这可能令人费解,因为每个CSS class不是其自身必要的对象,但可以是一个wrapper class的一个部件。比如: <div class="mod"> 对象是一个class为mod的模块。包括4个部件节点(不能独立于模块外,包括2个区块,inner和body,和两个可选择的区块,head和foot) OOCSS如何提升性能? OOCSS具有双倍的性能优势:
要用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中,不过别用它们来写样式。 设计师可以写OOCSS吗? 是的,设计师出于本能理解对象,比多数人当前书写CSS的方式要形象 — layers of exceptions (想一下,一个老太太吞了一只苍蝇)。事实上,他们爱上OOCSS的原因有两个:
设计师是聪明D。我们要给他们信任。他们会讲一种不同的,非工程师的语言,但是极客的语言经常以一种丑陋的方式来拒绝人。我们能做的更好。 我是个前端架构师,如何向团队传授OOCSS? 作为架构师,你应该写结构对象;圆角如何创建,为角或其他特性放置表象元素,并处理浏览器差异。新手为这些模块写皮肤(borders, colors, background images, 等等)。 我用OO-CSS方式创建了大批站点(千级的页面,百万级的访问者)。正确的完成后,很好扩展,这意味着新手将处理的个别元件可预见性很强。代码审阅很容易,因为有可接受的方法明确的规则来扩展对象。这种回馈使新开发者快速生产。 我在FullSIX(一个法国的网络营销机构)管理一个前端开发团队,是我工作过的最有才能的。某些时候我们的成功意味着我们将会有更多难以把控的工作。雇佣前端专家非常困难(没有这种学校!),所以我开始 对一些对写代码有兴趣的设计师(很少或没有经验)推行一个内部实习项目 ,一个月就可以作为团队的初级成员工作。
他们的代码在一个客户的网站上,同资深开发者写的一样好,或许更好因为他们还未学到一些坏习惯:) 入门:如何使用这些文件? 3个文件,libraries.css (reset 及 fonts 取自 yui), grids.css 及 template.css 已完成,其它的还非常不稳定。
如何部署在站点上? 注意CSS文件在不断改进中,我会依据接到的反馈进行改变。 我把CSS文件分为了模块,比如栅格和模板。在使用时移除不必要的注释并减少HTTP请求,否则站点会超级慢。这意味着要合并CSS文件为一个稍大的文件。我通过嵌套的注释来组织CSS。最后,作为上线/部署的一部分,用CSS压缩器来移除注释. |
|||
最新热点 | 最新推荐 | 相关文章 | ||
CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程:CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见? CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |