CSS也需要重构
最初接触到的CSS面向对象,是项目里的CSS超过8千行,缺乏约束和管理,在近期或不远的将来,有迫切的要求需要重构。CSS面向对象和模块化。
CSS代码遇到的问题:
重用性差,看着一个CSS的名称,很难说出哪些模块可能引用到了它,这个CSS是用作网页的哪些部分的;
结果谁也不敢修改和删除,后面的样式只能往上面堆积;
怕CSS重名,s1、s2、t1、t2这样的命名开始出现了,这无异于饮鸩止渴,没有人知道这些样式是做什么的;
于是,CSS越来越大了;
做高保真的美工和业务开发人员思路是完全不同的,我们看到各种风格的CSS定义和命名;
有时候,也会遇到CSS冲突的问题,这一切,还是归结为那一句话:复杂是一切软件问题的根源。
CSS重构的原则:
纵向模块化:由大到小建立CSS模块文件,比如:公用 -> 门户 -> 频道 -> 栏目 -> 内容;
横向模块化:适用于一些独立性高的组件,比如播放器模块、弹出层模块;
提供指导性CSS:例如,准备几套list类型展示的样式,把整个系统中的list展示全部收拢到这一处来,未来皮肤的更换、比较和修改,相当程度上便利了美工;
CSS的拇指原则:如果同一功能区域的两个样式很相近,只保留一个!
框架(栏目)用网格来控制宽度,而内容控制高度,当页面上由若干个栏目组成,每个栏目的宽度可以固定或者被频道按比例固定,但是高度需要取决于内容。
CSS本身是支持继承和模块化的,另外在HTML页面上,也可以比较容易地做到样式和扩展样式的使用。