近来，在Web开发中”框架”是一个相当时髦的词。比如JavaScript 框架 YUI、 JQuery和Prototype 都引起广泛的关注， Web应用框架Rails and Dojo 更是引人瞩目，仿佛所有人都使用某种框架来开发自己的网站。但究竟什么是框架?是不是框架仅仅是对程序员有用，设计师是否可以从中收益？9 d  V) L' J* y, O5 U
5 e6 C" G! y: V0 v4 x
什么是框架?
+ q4 Q, q! B/ U3 ^, t" z& D5 c+ U( D* e% d9 b% [/ X/ S
为了便于沟通，我们给“框架”统一一个定义（至少在本篇文章中是统一的）：一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使设计师和开发人员把重点放在任务项目所特有的方面，避免重复开发。通常的讲，框架就是上面提到的JavaScript框架和Web应用框架。
% E$ B$ R- U3 r2 ^# h4 k; d$ T6 ?# e% u+ H/ n
需要强调说明的是，我们不必讨论构造、打包发布，相反，一个框架只为你或你的团队使用即可。
) O* k+ ?- `' B
7 W5 x6 ?! _& x; c% r7 n& a2 E" ?: FCSS框架- G  R# Q" q* m& k: E5 F
4 K# B5 u1 j4 v* z- s) f. U
有些时候，你可能尝到了抽象类似的CSS代码的甜头，在那些同时设计几个类似网站的设计师身上表现最为明显。此外，团队中的设计师们从框架的方法上有很多的获益。比如，我在一家报馆工作，所有的20多个网站保持着很多的共同点，基于新闻网站的特点，它们趋向于更加相似，而不是差异。但是，即使单独一个设计师，设计一个从表面上看有差异很大的项目，也可以为CSS框架抽象出一些通用的小碎片。
- O  y3 M1 U' @1 ^  Q' l
+ H2 G! ~! Q  @8 o9 h% w劳伦斯日报（Lawrence Journal-World），我在那里工作，我们最近建立了一个CSS框架，并发现它是一个巨大的效率倍增。当然，我们花了数天时间自己创建了一个CSS框架，但一旦框架完工，开发高质量网页的速度是极快的。更何况，既然团队每一个设计师现在都使用这个框架，当一个设计师修改另一个团队成员网页时，他们不再需要花20分钟理解别人的构建思路，可以马上上手。
$ Q/ o& ]$ e. Y( x, A8 _8 D; a, v4 J% ~. I$ a
有那些可以忽略?
! |$ [" g" y$ \# s5 ]/ x4 ]5 r
* `. }  @8 X" n7 c$ b! g当投入到一个整体性很强的CSS框架，你想寻找的东西，是每个项目都做了一遍又一遍的重复通用的代码，目标是巩固这些代码核心地位，遵循“不重复自己（Don’t Repeat Yourself）”编码方法。这使得维护工作容易了许多，还可以帮访问者节省带宽开销。  L# G7 Y) c, M! W
) T  k: b7 K0 d4 G
几乎每个我参与的项目中，我必须声明的几个CSS问题：
' `& n0 U2 }. O0 Q  O+ Q3 n6 k+ H( C! ]% R
“大量重置”浏览器默认风格，比如，设置所有元素的margin和padding为0，去掉框架（framesets）和图片（images）的border，等等。
+ `2 F8 x3 K# W  a) R以基线对齐。这包括诸如设定块级元素的margins相同的(或多个)基准行高，如段落（paragraph）、头（header）、以及列表（list）。 0 y1 {6 u. [8 ~* s; m
创建表单（Form）的基本样式。
7 W6 u7 {: ?& |# K创建几个常用的CSS 类，例如，.hide(把display置为none，即隐藏元素)、.mute(设定为一个较小的字体和较亮的颜色)。
9 E+ p7 t: d; o# M4 C" s; T还有更有趣的事情，许多网站设计师发现自己不断重复使用着相同的基本结构，为什么不动它整理成自己的，在某种程度上可以非常灵活的用于多个网站?Yahoo这样做了，这就是YUI。当我们为的劳伦斯日报网站（the Journal-World）建立CSS框架的时候，我先看看Yahoo是怎么做的。我们很肯定那不是我们想要的，但作为一个很好的例子，给我们提供了很多思考和如何建构自己框架的想法。我们解决了16个布局模块，它具有足够的灵活性使我们的每一个网站都可以应用，即使每个网站看上去与下一个版本有些差异。另外大多数网站共用 widgets ，象下拉菜单、导航菜单、按钮等，这些也是主要的需要抽象提取的对象。除此之外,你可能有共同的内容名称，如图片列表的缩略图，你可以规范对CSS命名，如“thumbnail-list”，让所有显示缩略图的都使用这个CSS类。' m! U* J- K4 P- ?
6 u+ K+ t$ f6 L7 D1 G. P0 I) a
另外要做的可能是抽取hack（如兼容那些旧浏览器)加入自己的扩展的样式模块。我自己尝试过，但发现hack过于专有而不能抽取到通用框架里。

什么是真正的益处?/ w4 c5 N  [. g9 t, w

4 e  X$ b  v6 O6 U: J& i! h. T框架的真正好处是能够快速启动工作，你可以创建一个新的(X)HMTL文件，引入你框架，你不用再处理重置padding 和 margins的事情，漂亮的排版，干净的表单，整齐的布局，有效的widgets，等等。很明显，很明显，虽然，你一定要来定制外观和感觉为每个站点。为实现这一目标,所有你需要做的是复写,并添加到默认的风格是必要的。# z5 u! n8 \. p3 }( J! L- F0 G3 G5 H

; r$ C# B0 h( K, K  w很显然，尽管你必须为每个网站定制外观，为了完成这一任务，你所需要做的就是在默认的样式上加几行代码。举个例子，如果在你的框架里，为所有的 class属性为“tabs”的UL标签设置了基本的水平导航样式，并且有一个灰色的边框，你只需要几行CSS代码，就可以定制成你的网站所符合的外观样式。/ {1 G% ~4 A/ @

引用:

ul.tabs li {$ q1 i7 w  d, I  D, C
border: none;" q* v4 Z& U) ~2 S& e/ \6 k5 M
background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);
  {6 b( H3 ~9 R+ h; `}
# O  g8 @9 Z3 f3 U

列表左浮动，并且将链接以块的形式置于列表当中，链接也左浮动，字体居中，象烦人的广告一样的这些工作，框架以帮你完成，在你的网站设计工作中，只需集中精力处理特别的、有趣的网站细节，而不是写已经写过百万次的CSS代码。
. u5 o' y7 \$ G# v
5 o  ]: i$ T6 W* R  a6 ]' M, n5 E如何构建一个CSS框架?, M& m; d' f5 _* n8 y' Y
2 E( m. ]0 M+ C- p6 t5 m4 _
构建一个框架有几种可能的方式，但最常见，可以说是最有用的，抽象通用的CSS放到一个独立样式表文件，该样式表文件只包含整体的一个特有部分。例如,你可以，一个样式处理排版，另一个处理大量重置。这种好的方法能使你选择性引入你需要的样式，在你框架里可能有六七个不同的样式文件，但不需要其中的一两个，只要不引入即可。我们团队创建的框架包含5个样式文件：2 j- E1 M7 d1 [
1 h! n7 N& P* i- t# {8 s; I
reset.css —处理重置
. Q* Z' O% E6 Y6 u: t8 N1 g& Ptype.css —处理排版
! f: Q' x" I3 v" R7 bgrid.css —处理布局
( d0 C& p+ b9 Dwidgets.css —处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮
6 F% G! Z  J5 q& |base.css —包含所有的其他样式表文件，以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架/ x' Q; q4 }$ _. Q6 x% n: S  E
然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充。
0 d; V$ E" n9 s0 W" ^; R3 j: e8 x; ~, [
忠告
9 ?1 g5 U5 y, z+ ~' x5 D# y
5 S9 G# V: K9 m; T4 k! b这种方法不错,但也带来新的问题：增加了每一个页面的http链接数。对于大流量和中等流量的网站，每个页面增加5个以上HTTP连接数，系统管理员可能就麻烦大了。两个可能解决办法：: N  G5 X: R* R3 _2 `
# c. K" e; R0 c1 B0 }8 {
把所有样式都放到一个文件里，而不是分成多个模块。这里的问题是，失去了框架只包含特定文件的灵活性，而且维护也变得麻烦。 ) \6 R- |( R* q9 B0 N
有一个服务器端程序,动态把多个单个文件处理成一个响应。我还没看到这种做法，但如果做好了应该是很有效率的。以我上面框架为例，当请求（Request）base.css时候，而不是请求（Request）type.css , grids.css 等的时候，这一动态处理过程触发。这样一来,单个文件仍然可用，而在平台版本上整个框架也有效的。" }7 g- h( A) y& [
总之，我们目标不是尽可能的抽象，这点非常重要。相反,其目标是提供了一个快速启动和更有效率的设计过程，这是绝对有可能去做过的。如果你过于的抽象，事情会变得混乱，太多的HTTP链接数会影响你网站的性能。记住：一个好的框架不是把事情搞更难更复杂，而是一个简单的从零的开始。% {8 e( f7 g8 _: `% M& P0 {

' F0 v! L- o0 I* V, n8 v总结
3 ]: n5 ]! G( I7 B/ Y, L) s
& M. r0 L8 p; j: l6 x7 U2 k我们web设计师往往经常重复自己，就像我程序世界里的那些朋友，我们重置浏览器默认样式、设计布局和导航菜单写了一遍又一遍——几乎每个项目。花一点时间整理CSS 框架，可以使你快速的启动每一个网站项目，更轻松的维护网站，并帮助团队里其他的设计师理解你作品。要注意的一点，这些益处的获得必须以不影响网站的性能为前提。