什么是框架?
需要强调说明的是，我们不必讨论构造、打包发布，相反，一个框架只为你或你的团队使用即可。
css框架

劳伦斯日报（lawrencejournal-world），我在那里工作，我们最近建立了一个css框架，并发现它是一个巨大的效率倍增。当然，我们花了数天时间自己创建了一个css框架，但一旦框架完工，开发高质量网页的速度是极快的。更何况，既然团队每一个设计师现在都使用这个框架，当一个设计师修改另一个团队成员网页时，他们不再需要花20分钟理解别人的构建思路，可以马上上手。
有那些可以忽略?
几乎每个我参与的项目中，我必须声明的几个css问题：

“大量重置”浏览器默认风格，比如，设置所有元素的margin和padding为0，去掉框架（framesets）和图片（images）的border，等等。
以基线对齐。这包括诸如设定块级元素的margins相同的(或多个)基准行高，如段落（paragraph）、头（header）、以及列表（list）。
创建表单（form）的基本样式。
创建几个常用的css类，例如，.hide(把display置为none，即隐藏元素)、.mute(设定为一个较小的字体和较亮的颜色)。

另外要做的可能是抽取hack（如兼容那些旧浏览器)加入自己的扩展的样式模块。我自己尝试过，但发现hack过于专有而不能抽取到通用框架里。
什么是真正的益处?

很显然，尽管你必须为每个网站定制外观，为了完成这一任务，你所需要做的就是在默认的样式上加几行代码。举个例子，如果在你的框架里，为所有的class属性为“tabs”的ul标签设置了基本的水平导航样式，并且有一个灰色的边框，你只需要几行css代码，就可以定制成你的网站所符合的外观样式。
examplesourcecode[www.52css.com]viewplaincopytoclipboardprint?
ul.tabsli{
border:none
background-image:url(’/images/tabs/?site-specific-tab-look.jpg’)
}
ul.tabsli{
border:none
background-image:url(’/images/tabs/?site-specific-tab-look.jpg’)
}列表左浮动，并且将链接以块的形式置于列表当中，链接也左浮动，字体居中，象烦人的广告一样的这些工作，框架以帮你完成，在你的网站设计工作中，只需集中精力处理特别的、有趣的网站细节，而不是写已经写过百万次的css代码。、
如何构建一个css框架?
reset.css—处理重置
type.css—处理排版
grid.css—处理布局
widgets.css—处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮
base.css—包含所有的其他样式表文件，以便我们只需要在(x)html引用base.css即可使用整个css框架
然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充。
忠告

把所有样式都放到一个文件里，而不是分成多个模块。这里的问题是，失去了框架只包含特定文件的灵活性，而且维护也变得麻烦。
有一个服务器端程序,动态把多个单个文件处理成一个响应。我还没看到这种做法，但如果做好了应该是很有效率的。以我上面框架为例，当请求（request）base.css时候，而不是请求（request）type.css,grids.css等的时候，这一动态处理过程触发。这样一来,单个文件仍然可用，而在平台版本上整个框架也有效的。
总之，我们目标不是尽可能的抽象，这点非常重要。相反,其目标是提供了一个快速启动和更有效率的设计过程，这是绝对有可能去做过的。如果你过于的抽象，事情会变得混乱，太多的http链接数会影响你网站的性能。记住：一个好的框架不是把事情搞更难更复杂，而是一个简单的从零的开始。
总结

• 上一篇： 网页设计中的色彩应用
• 下一篇：网站健康检查