包菜先生

交互设计,音乐,生活。

« GMAIL昨天更新了,但是还有可以改进的地方。

试验面向对象的CSS

“你如何为成千上万的用户和页面提供CSS?” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会上的幻灯片中尝试回答的问题。得益于 面向对象的CSS (OOCSS) ,这个想法从社区收集到了大量的反馈。

OOCSS显然已经不仅仅是一个工具了,它还是一种思考的方式。根据这个观念可以有很多优势,主要来说有:

  • 它可以让你写更快的、可维护的、基于标准的前端代码。
  • 它在CSS中预先加入了一些必须的元素,这样即便是初学者也可以参与写出漂亮的网站。

OOCSS 基于两个主要原理:

  1. 分离结构和表现;
  2. 分离容器和内容。

建议花些时间看一看 面向对象的CSS的幻灯。总共有64页,绝对值得一看。

PS:神飞之前就有考虑将此幻灯翻译成中文,但是作者不允许下载,所以大家就将就着看吧先,另外考虑翻译一些相关的文章来更多的解释OOCSS。

PS2,貌似国内也有个人做了一个OOCSS,意思也是面向对象的CSS,不过和这个不是同一个。

原文:http://www.qianduan.net/object-oriented-css.html

以下部分为我个人试验代码:

<html>
<head>
<style>
.model{background:#f00;width:200px;height:200px;}
.saleMod{extends: model;border:1px solid #000;}
</style>
</head>
<body>
<div class="model"></div>
<div class="model saleMod"></div>
</body>
</html>

的确有助于减少CSS代码,我开始在新项目中研究使用这一思想。

  • quote 1.小力 2009-7-10 17:24:42 回复
  • 好文,一口气读完了

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Devo Build 80201

Copyright cabbageman.cn Rights Reserved.