关于CSS 框架的论述

所属分类: 网页制作 / CSS 阅读数: 630
收藏 0 赞 0 分享

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

js 解决隐藏与显示div的相关问题

我的导航中就有一栏产品中心下面用隐藏个div然后鼠标放上去就显示出来,但是导航那一块div一直出不来,什么都没有,很是郁闷不知道是什么原因
收藏 0 赞 0 分享

关于clearBoth在GOOGLE Chrome中的问题解决方法

下面这段CSS在IE中好好的,但在GOOGLE Chrome中总是不行,我调测了无数次。问题就出在 clearBoth 这个样式上,此问题如何解决,写下来详细介绍
收藏 0 赞 0 分享

用css margin去掉横排图片之间的间距

HTM,CSS,怎样去掉横排图片之间的间距,是我们的一大头疼问题,于是本人搜集整理一下,晒出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

关于li:hover的怎么清除浮动问题实现代码

当鼠标移动上去时,周围显示一个方框,但是后面的会向后移动,如何才能使得当鼠标移上去时后面的li不浮动
收藏 0 赞 0 分享

ie6不支持两个连续并列class类名怎么解决

在网页布局中会使用到两个连续的class,但唯独ie6不支持,很郁闷,于是搜索整理下,晒出来和大家分享
收藏 0 赞 0 分享

如何在class内写xsl标记注意事项

想要在class中写一个xsl标记,想要知道应该如何来写出正确的代码语句,请详看本文
收藏 0 赞 0 分享

ie10 css hack 条件注释等兼容方式整理

ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来解决
收藏 0 赞 0 分享

IE6双倍边距 IE6浏览器会出现双倍边距解决方法

所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍,这个问题从有css技术时就已经诞生,本文将介绍详细解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

css 网页背景图片 怎样用CSS实现大背景网页效果

在网页设计制作中经常会遇到这样的问题:用图片做背景时,由于显示器分辨率太大或者图片尺寸太小,在页面的两边或者下部了没有背景图片,使页面变的很僵硬,于是搜集整理一些,晒出来和大家分享
收藏 0 赞 0 分享

CSS字体中英文名称对照表 CSS常用中文字体英文名称对照表

在CSS文件中,我们常看到有些字体名称变成了乱码,这是由于编写者将中文字体的名字直接写成了中文,为了避免这种状况出现,在CSS文件中使用中文字体时,最好使用中文字体的英文名称,需要的朋友可以注意下
收藏 0 赞 0 分享
查看更多