使用本身的CSS框架（转）

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

模版世界:http://www.templatesy.com