日期:2014-05-17  浏览次数:20580 次

[经典推介]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