首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

复建:CSS也面向对象

2012-10-28 
重构:CSS也面向对象最初接触到面向对象的CSS还是因为项目中的CSS已经超过八千行,缺乏约束和管理,在近期或

重构:CSS也面向对象

最初接触到面向对象的CSS还是因为项目中的CSS已经超过八千行,缺乏约束和管理,在近期或者是不远的将来,有迫切的要求需要重构。在前端重构中,我们已经讨论过了JavaScript面向对象的重构,在这个时候再看一看CSS面向对象和模块化,这给我的工作提供了非常好的思路。

首先,我要说的是,在这个概念翻飞的年代里,固执地追求某些概念和涵义,并不能带来更优秀的设计和更高的生产力,面向对象是一种思路,或者说是一种方法论,给CSS重构带来一些启示,这就足够了,没有必要去纠结OO CSS的定义和严谨性。

?

我们的CSS代码遇到了什么问题?

重用性差,看着一个CSS的名称,很难说出哪些模块可能引用到了它,这个CSS是用作网页的哪些部分的;

结果谁也不敢修改和删除,后面的样式只能往上面堆积;

怕CSS重名,s1、s2、t1、t2这样的命名开始出现了,这无异于饮鸩止渴,没有人知道这些样式是做什么的;

于是,CSS越来越大了;

做高保真的美工和业务开发人员思路是完全不同的,我们看到各种风格的CSS定义和命名;

有时候,也会遇到CSS冲突的问题,这一切,还是归结为那一句话:复杂是一切软件问题的根源。

CSS重构的原则:

纵向模块化:由大到小建立CSS模块文件,比如:公用 -> 门户 -> 频道 -> 栏目 -> 内容;

横向模块化:适用于一些独立性高的组件,比如播放器模块、弹出层模块;

提供指导性CSS:例如,准备几套list类型展示的样式,把整个系统中的list展示全部收拢到这一处来,未来皮肤的更换、比较和修改,相当程度上便利了美工;

CSS的拇指原则:如果同一功能区域的两个样式很相近,只保留一个!

框架(栏目)用网格来控制宽度,而内容控制高度,当页面上由若干个栏目组成,每个栏目的宽度可以固定或者被频道按比例固定,但是高度需要取决于内容。

CSS的规则定下来以后,需要开源和节流两个角度去控制与管理,一方面,新加入的CSS必须按照规则行事,这点需要给高保真设计人员和业务开发人员提要求;另一方面,原有CSS需要进行逐步的重构。

CSS本身是支持继承和模块化的,另外在HTML页面上,也可以比较容易地做到样式和扩展样式的使用,比如:《div src="/img/2012/10/18/1259532951.png">
?

最后以http://oocss.org/的例子结尾:

?

热点排行