您的位置: 首页 > 技术文档 > 网页制作 > CSS Frameworks的概念
[JS效果]动画效果打开/关闭层 回到列表 xhtml+css制作不规则导航
 CSS Frameworks的概念

作者:aoao 时间: 2008-04-07 文档类型:原创 来自:蓝色理想

最近看到N多介绍CSS框架,前些天我说过一句话:“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”,当然也可能是我的视野太小了,或者是说世界太大了,我自己还是感觉还有一大堆我看不到的东西。

先来看一下一个我比较认同的概念

框架可分为白盒(White-Box)与黑盒(Black-Box)两种框架。

基于继承的框架被称为白盒框架。所谓白盒即具备可视性,被继承的父类的内部实现细节对子类而言都是可知的。利用白盒框架的应用开发者通过衍生子类或重写父类的成员方法来开发系统。子类的实现很大程度上依赖于父类的实现,这种依赖性限制了重用的灵活性和完全性。但解决这种局限性的方法可以是只继承抽象父类,因为抽象类基本上不提供具体的实现。白盒框架是一个程序骨架,而用户衍生出的子类是这个骨架上的附属品。

基于对象构件组装的框架就是黑盒框架。应用开发者通过整理、组装对象来获得系统的实现。用户只须了解构件的外部接口,无须了解内部的具体实现。另外,组装比继承更为灵活,它能动态地改变,继承只是一个静态编译时的概念。

在理想情况下,任何所需的功能都可通过组装已有的构件得到,事实上可获得的构件远远不能满足需求,有时通过继承获得新的构件比利用已有构件组装新构件更容易,因此白盒和黑盒将同时应用于系统的开发中。不过白盒框架趋向于向黑盒框架发展,黑盒框架也是系统开发希望达到的理想目标。

再回头看一下现在网上那样多CSS框架(YUI是叫“YUI Library CSS Tools” 并非是“YUI CSS Frameworks”),有多少是真正以框架的概念在写,有多少只是定义样式基类的。当然,每个人对框架的理解不一定,你可能不认同我的说法。

再谈一下CSS 框架,并不非我不认可这个东西的存在,我从一两年前也就一直在尝试这样的东西。对于大型网站,前端的开发需要一个解决方案。框架自然是首选的。可惜距离我太远了,我太弱了T_T,我只要要求两点:

  • 管理下面的内容的东西
  • 类/组件

很明显,第一点,CSS做不到,第二点,相对其它语言很弱的说。

大约在一年前做一个中型网站时,我为了偷懒,我想到内容模块化,让程序员拼页面。大约方向也就是封装了一个又一个的功能块,程序员在要用到哪一块内容时就只要使用相应的HTML与CSS,大家都方便,我不要拼页面,他不用重复套代码,大家好才是真的好。

在同一个网站,差不多的内容块,多次使用是很正常的事,这也是就让模块化成为可能,比如一个图片列表,可能是用户头像列表,或者群组的图标列表,这时你会怎样写呢?相同的用这样吗?

.photoListUesr,.photoListGroup{ /*_*/ }

这样不是说不行,但如果突然说要再加一个相似的呢?这时可能就要调整样式。而我呢?尝试过这样的使用方式:

<div class="photoList UesrCt" />
<div class="photoList GroupCt" />

这样的话,我们一开始就分离出共同表现的东西,把.photoList当成原型,通处额外的class再去处理细节。前些天,我写了 面向对象的XHTML与CSS编程 ,其实只写了一半,另一半是详细的例子,不过介于要做太多的例子跟核心已经写出来就没写完,^^ 当然,这样也存在一定的问题,就是最初的原型的定义要很慎重,要尽量做到以后就算是改版也可能不用修改。CSS这东西,基本上一个框架最多只能适合一个站,当然,如果这个站足够大的话,这样使用才是有意义滴。

HTML与CSS越是模块化,文件越分散这个问题就越严重。HTML倒是好办,反正是应用程序最终要合并输出一份,但CSS一般会给抛弃直接使用。如果在刚才的例子中,在网页导入CSS的方式是这样的话:

@import url(/xxx/photoList.css);
@import url(/xxx/UserCt.css);
@import url(/xxx/GroupCt.css);

那甚至可以考虑用程序来拼页面,但是使用方便,请求数也成正比,一般情况大家都会选择手动合并文件。虽然人脑比电脑更智能,但很多时候,人脑的计算能力是比不上电脑滴。我曾经有这样的想法,就是使用服务端程序来处理CSS的发布机制,大约方向就是通过网站访问日志来分析出整个站各种页面的使用量,通过程序来计算哪些公共使用的要合并,合并的顺序(CSS的文件顺序会影响到优先权),等等各种计算并压缩输出。

可惜的是,这样一套复杂的程序可能只适合一个站,或者同系列的站群。虽然说做起来有点折腾,但我相信门户级别网站使用这样的方式是有必要滴,当然前提还要整个团队都要使用相同的设计模式。

PS:以上CSS发布程序,只是我的幻想,还没尝试过,有兴趣的朋友可以尝试一下,如有意外,概不负责。

当然,就以上这些还是不能称得上CSS Frameworks,或许只能叫成一个系统级解决方案,毕竟,CSS只是描述性语言。

前晚跟月影一起吃烤鸭时,有聊到这个,他问我有没有前端一体化的解决方案。JS组件化时也会面临同样的问题,差不多的发布机制应该也可以适用JS。不过完全的一体化解决方案我还没想好,也许月影多请我吃几次烤鸭我就能想好。

本文链接:http://www.blueidea.com/tech/web/2008/5639.asp 

出处:蓝色理想
责任编辑:bluehearts

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
xhtml+css制作不规则导航
山顶角
客齐集社区头像显示效果
你是真正的用户体验设计者吗? Ⅲ
你是真正的用户体验设计者吗? Ⅱ
作者文章 更多作者文章
IE8的WebSlices
面向对象的XHTML与CSS编程
如何减少网页的内存与CPU占用
文字适度阅读的宽度或者字数
如何快速的呈现我们的网页
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2