使用 CSS 框架的好处有哪些?

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

Vin Thomas 通过 Twitter 提出了这个问题

使用 CSS 框架有哪些好处?与从头开始相比,您会推荐哪种方式?

我有点害怕这个问题。我觉得正确的答案需要对许多流行的框架进行深入分析,而且要真正做到全面,还需要使用它们完成一些项目,这样我才能了解它们在实际使用中的“感受”。光是想想就让我觉得很累。

与其做所有这些工作(哈哈!),我将尝试表达我对 CSS 框架的看法,也许在写完这篇文章之前,我会说服自己一些事情。在我们开始之前,需要明确一点,我指的是像 Blueprint CSSYahoo! GridslogicssYAML 等框架(是的,还有很多其他的框架,没必要全部列出来,我相信你可以在其他地方找到更全面的总结)。

让我们从“好处”开始。不是它们承诺了什么,而是我认为你可能真正获得的东西。

好处

  • 它们可以帮助你学习 CSS。你可能真的不知道如何实现一个可靠的多列布局。框架可能是你入门了解 CSS 工作原理的好地方。
  • 它们提供了你每次都不需要从头开始编写的代码,比如重置样式。我一直认为使用星号选择器(*)重置 margin/padding 是一种很好的重置方式。我经常使用它。但是……如果你要开始一个大型的新项目,这个项目包含很多页面,需要运行很多年,并且会随着时间推移而发展,那么你应该立即投资一个更强大的重置样式。所有这些框架都以优秀的重置样式开始,涵盖所有方面,并在未来几年内为你提供保障。
  • 它们缓解了跨浏览器兼容性问题。这一点你不能低估。我们都曾体验过在某个不合适的时机发现我们的网站在某个浏览器中出现故障的痛苦。框架旨在将其魔力带到所有浏览器中。
  • 它帮助你养成良好的习惯。例如在项目中包含打印样式表。我总是打算创建一个,而且我经常这样做,但是如果我一开始就有一个,那么我创建它的可能性就会大得多。
  • 它们鼓励基于网格的设计。这是一件好事。网格并不意味着单调乏味!它们只是帮助你获得更好的可读性、可扫描性、平衡视觉重量、灵活性、可扩展性和整体页面连贯性。
  • 它们带有文档。如果你需要帮助入门,框架通常会提供一些支持文件。如果你正在设计一个要交付给客户的网站,这一点尤其有用。你可以告诉他们你使用了哪个框架,并将他们引导到该文档以获取支持请求。
  • 它们奠定了基础。如果你正在使用像 YUI 这样的框架,如果你一直使用所有 YUI 相关的东西,那么你的生活将会变得更加轻松。它旨在协同工作并具有可扩展性。

坏处

  • 为了真正从中受益并节省时间,你需要反复使用一个框架。它们都说你会节省时间,但我认为只有当你开始在一个框架中变得舒适时,这才是真的。这不像将你的马车升级到 T 型车,第二天你就能节省穿过城镇的时间。
  • 它会改变你编写 HTML 的方式。我一直用一个名为“page-wrap”的 div 包裹我的网站。好吧,太糟糕了,在 logicss 中它被称为“container”。是的,这是一件小事,但我喜欢按照我自己的方式编写标记,而不是根据某个框架预先设定的类/ID 名称。
  • 它们可能会导致代码臃肿。框架中可能设置了一些 CSS 样式来适应你永远不会使用的各种布局。如果你关心网页的每个字节,你最终会删除很多未使用的代码,这会破坏框架的意义。
  • 它们可能会让客户变得危险。我曾经做过一个项目,客户希望所有内容都使用 YUI 完成,从网格开始。我花更多的时间学习 YUI 并试图弄清楚如何将一个已经设计好的 Photoshop 文件塞进它,而不是真正关注细节并专注于质量。最终我们完成了,但是为了使用这个框架,花费的时间很容易增加三倍,而我认为它最终并没有那么有用。

那么呢?

所以我说我可能会在写作过程中说服自己一些事情。我认为我已经做到了,那就是对我个人而言,CSS 框架并不适合我。我觉得总而言之,CSS 是一种相当简单的语言。我有点喜欢编写我自己的 CSS。我觉得不需要任何帮助,而且我无法想象任何框架能为我节省大量时间。但这只是我个人的想法,你应该自己做出决定。哎呀,我不是 Blue Flavor,而且他们非常喜欢它