CSS Frameworks的概念

最近看到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。不过完全的一体化解决方案我还没想好,也许月影多请我吃几次烤鸭我就能想好。

广告一下:Ucren-widgets,国内一个不错的JS组件。

扩展阅读:CSS Frameworks + CSS Reset: Design From Scratch

This entry was posted in Web开发 and tagged , , . Bookmark the permalink.

19 Responses to CSS Frameworks的概念

  1. Robin @ 2008-01-21 at 06:52

    嗯, 嗷嗷提到的组件化真是我们一直在做并且现在正在改进的开发机制. 很对,看看拼起来的网站页面动辄就有5,6个css或者js的调用.这一直是组件化开发的难题. 感谢aoao提供的Ucren-widgets确实很不错,貌似和ext有异曲同工之妙. :)

  2. Json Lee @ 2008-01-21 at 08:58

    几个月前就看这CSS Frameworks 这个名词了,可一直都没有看明白它能带来多大的好处,现在也是
    不知道它跟我们自已稍微搭的CSS架构有什么区别?^_^

    html.css
    *{margin:0;padding:0;}
    body{
        /* */
    }
    header.css
    #header{
        /* */
    }
    layout.css
    @import url(html.css);
    @import url(form.css);
    @import url(header.css);
    @import url(footer.css);
    #layer{
        /* */
    }
    index.css
    @import url(layer.css);
    blog.css
    @import url(layer.css)
    
  3. bluesnail @ 2008-01-21 at 09:33

    文章不错,烤鸭也不错!

  4. llinzzi @ 2008-01-21 at 09:42

    css框架的概念越来越清晰了,应该很快就能看到成型的产品了 只不过CSS没有很好的继承机制 :(

  5. aloo @ 2008-01-21 at 10:47

    确实,css框架已经非常必要了~~

  6. 怿飞 @ 2008-01-21 at 11:56

    我也要吃烤鸭,嘎嘎

  7. 正淳 @ 2008-01-21 at 21:04

    最近我和楼上的怿飞一起开发新的b2c网站,其中就在做css的框架。待项目发布,我相信这个css框架也会具有一定的雏形。届时再来仔细介绍css框架在配合项目开发中的优点和缺点。

  8. 正淳 @ 2008-01-21 at 21:07

    还有,理想中的框架应该是怎么样的,得和大家展望一下.

  9. om19 @ 2008-01-21 at 21:07

    Blue Print算不算您文中说的CSS框架?

  10. aoao @ 2008-01-22 at 01:28

    @Json Lee 如果两个css都是@import url(layer.css);全部并成一个文件也一样。我的说起来可能有点复杂,可以先看一下我之前写的面向对象的HTML与CSS编程,如果能理解就应该能理解这个。

    @llinzzi 没有很好的继承机制,但还是勉强可以用。

    @正淳 期待你们的项目。

    @om19 不算 ^^

  11. Amer @ 2008-01-23 at 11:41

    我们也用的类似的做法,只是在实际做的时候发现,CSS其实是很多变的,网页相对其他产品如软件或者B/S系统来说也是最多变的,能够提出来相对稳定的,很少很少。你会发现大部分时候用的都是“扩展”。

    门户中最稳定的是频道,可以有效提取,但是它一年不改一次,一改都是全部重新来过;门户中最活跃的是专题,天天都在做,但是这些是几乎无法提取的。最后能归类提取出来的,就3,4个了,不过也还凑合用:)

  12. greengnn @ 2008-01-26 at 17:38

    qozne的客户端基本上用样式拼出来的页面

  13. 潇洒 @ 2008-01-30 at 01:31

    下次吃烤鸭记得叫上我……

  14. netfreeman @ 2008-02-02 at 18:31

    CSS很不复杂, 请不要将它复杂咯…CSS框架是不可能也是不应该的.重用性增强,带来的是维护性多倍下降.

  15. 谢飞 @ 2008-02-21 at 13:01

    css框架目前只是个人的想法..每个项目的不同..框架应对的情况可能不能胜任..就像我目前的项目..

  16. linqr @ 2008-04-05 at 20:19

    原来月影老大是GG ^ ^

  17. takecolor @ 2008-04-19 at 23:08

    推荐一下我觉得非常轻量级而且很少侵入性的css framework

    http://www.1x3x.net/blog/web-design/2008/04/css-framework.html
    CSS Framework,让你事半功倍

  18. 倾心 @ 2008-08-01 at 09:56

    太深奥了

  19. 小当 @ 2008-12-02 at 11:36

    嗷嗷推荐的Ucren-widgets页面存在严重的吃内存问题,我用火狐浏览居然令我的浏览器爆掉,真是晕啊!~~~

发表评论

(必填)

(必填)