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