CSS 框架结构

progenh.jpg

分工的出现,导致生产力的进一步发展。做设计、CSS能够合理化的分工同样是IT生产力的发展。

我们开发一个项目,会有许多CSS文件,这些CSS文件共同组成了项目的样式表,页面中的样式也同时也会是多个人共同编写的。就像人们穿衣服一样,衣服、裤子、鞋都是不同厂家生产的,怎么分工,怎么协调,成了最重要的工作。

在做了许多设计,HTML CSS 以后,如何把以前的东西、团队的东西很好的复用,减少再次劳动也是提高团队工作效率的一大法宝。

看了A List A Part 的两篇文章Understanding Progressive EnhancementProgressive Enhancement with CSS再根据自己在项目开发中的一些经验总结出一些东西,现分享出来。

我的CSS文件结构图如下:

css-frame.png

注释代码格式:

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Use: Core Styles , Set the core styles
Author: adamghost
Date: 30 October 2008
Created by: adamghost
E-mail:adamghost1@gmail.com
www.adamghost.com
Project: XXX
Page(s): all

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

各文件作用

  • screen.css 导入其他的样式
  • page-xx.css 单独页面所需要的样式写这里,在需要的页面中引入
  • ie(x).css 针对IE不同版本设置hack用的css。需在页面中写ie条件注释
  • reset.css 重置页面样式
  • core.css 页面核心效果样式(font, color, line-height, …a, p, h1, h2, h3, h4, …)
  • layout.css 控制页面整体布局
  • lib.css 可重复使用的库,同时也导入可复用的CSS库
  • dfw.xx.css dfw代表dreamflywireless,意思是工作室的CSS库文件

这样构架CSS之后的好处

  • 最大程度的复用CSS,每个项目最多不一样的地方在layout.css中,针对每一个项目单独做layout.css就可以。至于core.css里的变化可有针对性的稍作调整。
  • 便于分工协作,layout.css以及core.css核心样式由项目中CSS界面总监负责编写。lib.css中导入样式dfw.xx.css可模块化分工给相应成员,开发时只需页面引入screen.css即可。

缺点以及改善措施

  • IE6中一个CSS文件中最多能import 31 个 css 文件,可采用垂直import解决此问题。
  • 新增加的CSS文件数量,使请求增加以至于网站响应速度减慢。针对每个项目的独立性,正式发布时,可由程序员写一个程序,将这些样式综合到一个文件里。当然,这里要注意各css文件与图片的相对路径问题。为此,我把dfw.xx.css与lib.css放在同一目录。
  • 多人开发一个项目(网站、界面),我们得有一个《XXX项目界面设计指南》,用来规范页面以及设计的各种细节,以保证项目设计风格、代码风格统一。如下图:
设计规范样稿
设计规范样稿

结构文件下载:css frameset (1372)

Technorati : , ,
Del.icio.us : , ,
Zooomr : , ,
Flickr : , ,

4 responses on “CSS 框架结构

  1. 这两天正遇到复杂的css结构,就直接拿去用了,谢了。

    1. @longbill, 哈哈,不客气哈!

  2. kaka

    非常感谢,自己欠缺的就是整体整合css框架看完后有很大启发,谢谢

    1. 不客气呢~转做交互设计了,希望自己以前学XHTML+CSS的经验对其他同行有帮助:)

Comments are closed.