不少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 – 让兼容性测试更容易的在线服务
你已经遵循了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 – 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 – 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 – 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》一书的。
