当前位置:首页 > 开发 > Web前端 > Css > 正文

[经典推介]CSS框架开发向导——定制你自己的CSS框架

发表于: 2011-02-26   作者:bardo   来源:转载   浏览次数:
摘要:         不少CSS框架已经存在了一段时间,但大多数Web开发人员避免使用它们。 相反最有经验的开发者希望创建自己的CSS框架,提供个性化解决方案的优势,并减少对第三方的解决方案消极方面的依赖。虽然CSS框架,目的是加快网络开发,但是开发自己的全面的CSS框架,可能需要大量时间和精力。 本文将提供指导和精心挑选的资源,以协

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

 

        
        您可能还需要检查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框架中使用: 
       

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

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

 

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

       

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

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

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

        
        你还可以做什么?
        你可以做更多的事情,这是背后即是要有你自己的CSS框架的主要思路。 您可以创建许多抽象的CSS文件,只要你喜欢,如:
       
        component.css (组件)
        这可能包括CSS常用的成分,比如下拉菜单,工具提示等
        application.css (应用)
        这可能拥有多个版本针对您经常设计的每一个不同类型的应用程序。 例如:WordPress,Drupal,BlogEngine.Net等。
       
        最后 - 使用自己的CSS框架
        使用你的框架就是简单地包含所有必需的文件在你的HTML之中。但包含一些不必要的CSS文件意味着额外的HTTP请求。为了避免这种情况你应该首先将所有的文件合并(browser.css和print.css文件除外),然后包含这个新的CSS在你的项目文件中。 
       
        为了保持本文的短小,只提供了一些有限的资源,所以请随意寻找更好的替代品,并与我们其他人分享您的意见。
        您也可以在快速浏览一下: 
       

        
        ——————————————————————————————
        发表于 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》一书的。

 

 

 

 

 

[经典推介]CSS框架开发向导——定制你自己的CSS框架

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本
利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionald
利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本
  利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了
CSS 可以做很多事情,但开发者更习惯的是变量、常量和一般的更快速的语法,而 CSS 本身是不支持的。
最近因项目需要,我自己设计开发了一个基于Windows Forms的向导开发框架,目前我已经将其开源,并发
目录[-] 1. 960gs 2. YUI 2: Grids CSS 3. Blueprint 4. BlueTrip 5. Elastic CSS 6. Easy 7. EZ-CS
 利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基
在这里你有一个很酷的框架,收集创建的CSS布局。 如果你不喜欢框架,宁愿使用自己的手写代码以促进
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号