一.css样式表管理(样式划分)
搜索一下,一大把。各种心得,各种理解啊。
见蓝色理想早期讨论帖子:http://bbs.blueidea.com/thread-2767504-1-1.html
我们总结一下css样式表管理的需要:
- 减少对css文件的请求数
- 合理加载需要的css,规避冗余样式
- 良好的可扩展性,团队的高效合作
前两点可能是css划分产生的一个根本原因,第三点则是维护上的需要。从长期考虑,前面两点甚至可以忽略,但是第三点相当重要。
良好的可扩展性:
不怕有规律的设计,就怕有针对性的变态设计。前端不应当握紧拳头对设计师说不,而应当放开手来,让设计师展开自己的手脚。在应对千变万化的设计时,你还需要把它实现,难吗?
不难,这样的要求一点都不难,一个reset.css就足矣,其他就由前端自己去实现OK了。这样,每个前端都有自己的解决方案,不必在团队定制的css框架上畏手畏脚。
但是,这样做,代码一致性就不可控了呀。
于是,我们需要css框架,而框架该如何定制,就成了比较头疼的问题。
------------------------------
暂时搁置吧,我发现越深入,反而越不好讲了。我也得花一番功夫重新研究下。但是,有几点建议,必须说明:
- 规避使用原子类,例如这种例子:http://www.fangyuqiang.com/metacss,诚如hax所说,反面教材的典范。千万别入此道,坑爹,这种用法只能给自己玩。假如需要做原子类的事情,可以使用LESS或者SASS来做。放在css层面,而不是毁坏html语义和css层权重。
- css文件划分基于通用,局部(包括部分页面共用样式,组件样式,插件样式),私有三个级别。模块样式划分基于功能模块划分,layout和skin可以整理下。个人觉得,LESS和SASS是做换肤的最佳工具。
- @import依然是一个不错的模块化css技巧,虽然影响了页面的性能,但是可以使用工具将@import的样式进行转化合并。
------------------------------