CSS框架自建必备

不少CSS框架已经存在了一段时间，但大多数Web开发人员避免使用它们。 相反最有经验的开发者希望创建自己的CSS框架，提供个性化解决方案的优势，并减少对第三方的解决方案消极方面的依赖。虽然CSS框架，目的是加快网络开发，但是开发自己的全面的CSS框架，可能需要大量时间和精力。 本文将提供指导和精心挑选的资源，以协助你完成这一心愿。

开始之前
首先尝试一些流行的CSS框架或者至少去看看他们提供的文件：

• Blueprint

• Yet Another Multicolumn Layout (YAML)

• YUI Grids CSS Foundation

• 960 Grid System

您可能还需要检查CSS框架的权威清单。

为什么要建立自己的CSS框架？
在现代的网页设计中CSS起着至关重要的作用，它是真的不是很难学。没有理由不去寻求一个捷径完成这个似乎一劳永逸的事情。

这里有一些具体原因/优点：

更有成效：
您将能够使用自己更有效的框架。

更好的设计兼容性：
您的设计将不依赖于如何制定一个框架，框架将自动支持你的设计的喜好。

更少的头痛的事：
你会不会继承错误或由其他人创建的缺陷。 当然，你自己的CSS框架可能有错误或缺陷，但你会更好地解决这些问题。

更大的灵活性：
当您的设计偏好与需求的有所变化时，您将能够轻松地对其进行修改。

额外的好处：
你不会花费您宝贵的时间来学习的框架，相反你的时间会花在学习更珍贵的东西：CSS。

让我们开始 - 分组及规则
最主要的反对意见是，开发自己的CSS框架将是复杂的任务。 CSS框架只不过是一个简单的在您的项目中您反复使用的CSS代码集合。优化和改善代码质量和效用的过程，需要额外的努力，技巧和时间。

让我们来看看什么类型的CSS代码是我们的项目中反复使用的。我们总是使用CSS布局，排版，表格和常用的如列表，图片等，我们还可以使用CSS来确保整体外观元素和感觉在所有Web浏览器中致。此外，我们有些人可能喜欢的组件（如菜单，图集，滑块等），我们在我们的项目反复使用; 包括它们在我们框架中的样式。

为了轻松维护您的框架的每一部分，将它分为多个CSS文件，例如：

reset.css
base.css
typography.css
layout.css
form.css
table.css
browser.css
print.css

上面的列表只是一个建议，你可以将你的框架分成任意数量的文件。 不过，为了从你的CSS框架获得最大利益， 你必须确保：

您已彻底测试所有的主流浏览器的输出
Litmus �C 让兼容性测试更容易的在线服务
你已经遵循了CSS的最佳做法：
CSS标准和最佳实践
CSS最佳实践-洞察 行业最佳实践
简洁的代码，合理的结构和适当的文档
Styleneat -在线工具，组织和规范你的CSS -选择，子选择器和属性
用最少的class和ID
它已经过错误测试，并已通过W3C的CSS验证服务验证

以CSS Reset, Base & Typography作为坚实的基础
不同的浏览器各种元素有不同的默认样式（边距，边空，边界，轮廓等）。reset文件删除不一致的默认样式，并确保所有主要的浏览器会使用一致的样式渲染出你的网站。这里有两个最流行的CSS Reset，您可能会考虑在你自己的CSS框架中使用：

• Eric Meyer CSS Reset

• YUI Reset CSS

完成CSS Reset之后，下一个合乎逻辑的步骤是设置自己的Base，提供适用于所有主流浏览器一致的默认样式。这可能是在一个单独的所谓base.css文件中完成或与您Reset文件一起。这里有一些资源，协助您建立你的Base：

• Tripoli

• YUI Base CSS

文字排版（Typography）是紧随每个具体设计的，所以包括在一个CSS框架中似乎首当其冲被认为是讨厌的和不明智的想法。但有一个覆盖了所有的基础的文字排版文件，是一个真正的节省时间的手段。甚至在一段时间内，针对不同详细的样式，因不同风格的字体的需要，你可能最终不得不用更多的不同的排版文件。
这里有一些资源和工具来帮助您入门：

• Typetester

• Typechart

• Blueprint Typography

• CSS Type Set

• EM Calculator

布局（Layout，Layouts） - 寻找圣杯

布局是最棘手的，也许是一个CSS框架中最有争议的部分。 就像排版，布局随设计千变万化和您应该谨慎选择是否要让它成为你的CSS框架的一部分。你甚至可以考虑在你的框架中有一个以上布局文件的可能性。
这里是一个可能提供进一步援助的资源清单：

• In search of the One True Layout

• 6 Keys To Understanding Modern CSS-Based Layouts

• Advanced CSS Layouts: Step by Step

• Five Simple Steps to Designing Grid Systems

• Fixed Width CSS Layouts

• Perfect Multi-Column CSS Liquid Layouts

• The ‘Holy Grail’ 3 Column Liquid Layout (Pixel Widths)

• CSS Layouts: A collection of 224 Grid and CSS Layouts

• CSS Layout Generator

Forms & Tables - 为什么不？

表单和表格二者均可以包括在你的base.css文件之中。不过，拥有更多的附加模板，将为您的设计能应对不同的需求增加很大的价值。
在作出最后决定之前，先看看这些资源：

• The Form Garden �C A CSS Based Collection for Web Forms

• Fancy Form Design Using CSS

• Clean and Pure CSS FORM Design

• Blueprint Form

• A CSS Styled Table

• Top 10 CSS Table Designs

浏览器特定CSS
不幸的是，很多场合需要我们写一些浏览器特定CSS workarounds。 但是，CSS的hacks 或 workarounds可能会产生在CSS验证错误。为了克服这个问题，你应该在你的HTML文件使用条件标记包含browser.css。
这里有一些资源，供您参考：

• IE6 CSS Fixer: Starter Kit

• CSS Hacks

• Developing CSS for IE6 and 7

• Explorer Exposed!

打印样式
一个单独的打印样式表将极大地改善您网站的可用性，特别是对大量的内容页面。
以下是一些额外的指导资源：

• CSS Media Types Create Print-Friendly Pages

• Print Stylesheet �C The Definitive Guide

你还可以做什么？
你可以做更多的事情，这是背后即是要有你自己的CSS框架的主要思路。 您可以创建许多抽象的CSS文件，只要你喜欢，如：

component.css （组件）
这可能包括CSS常用的成分，比如下拉菜单，工具提示等
application.css （应用）
这可能拥有多个版本针对您经常设计的每一个不同类型的应用程序。 例如：WordPress，Drupal，BlogEngine.Net等。

最后 - 使用自己的CSS框架
使用你的框架就是简单地包含所有必需的文件在你的HTML之中。但包含一些不必要的CSS文件意味着额外的HTTP请求。为了避免这种情况你应该首先将所有的文件合并（browser.css和print.css文件除外），然后包含这个新的CSS在你的项目文件中。

为了保持本文的短小，只提供了一些有限的资源，所以请随意寻找更好的替代品，并与我们其他人分享您的意见。
您也可以在快速浏览一下：

• Definitive List of CSS Frameworks

• List of Really Useful Tools for CSS Developers

• CSS3 Unleashed �C Tips, Tricks & Techniques

――――――――――――――――――――――――――――――
发表于 April 1st, 2009 原作： Saud Khan
原文网址：http://www.w3avenue.com/2009/04/01/guidelines-for-developing-your-own-css-framework/

译者注：这实际是一篇老文章了。但至今看起来仍然让人兴奋。主要是在于，此文章不在于让你学会什么，而在于指导你做什么。自 OO CSS（面向对象CSS）概念产生以后，随后的老牌的OOCSS框架，BulePrint框架面世，到现在，数10种CSS框架，让你无法确定该选择哪一个。
另一方面，选择以后，必然会有后悔。正如上文所说。所以，多数人的愿望是：自己写一个。
当然，能按本文写一个象样的CSS框架，按本文所说，初学者一样能做到。因为，本文让你参考的都是权威，经典，名篇。当然，另一方面，如果你真的有一定的CSS功底，那就更是水到渠成。所以，希望自己写的，但愿你是至少读过《精通CSS》一书的。