Vin Thomas 通过 Twitter 提出了这个问题
使用 CSS 框架有哪些好处?与从头开始相比,您会推荐哪种方式?
我有点害怕这个问题。我觉得正确的答案需要对许多流行的框架进行深入分析,而且要真正做到全面,还需要使用它们完成一些项目,这样我才能了解它们在实际使用中的“感受”。光是想想就让我觉得很累。
与其做所有这些工作(哈哈!),我将尝试表达我对 CSS 框架的看法,也许在写完这篇文章之前,我会说服自己一些事情。在我们开始之前,需要明确一点,我指的是像 Blueprint CSS、Yahoo! Grids、logicss、YAML 等框架(是的,还有很多其他的框架,没必要全部列出来,我相信你可以在其他地方找到更全面的总结)。
让我们从“好处”开始。不是它们承诺了什么,而是我认为你可能真正获得的东西。
好处
- 它们可以帮助你学习 CSS。你可能真的不知道如何实现一个可靠的多列布局。框架可能是你入门了解 CSS 工作原理的好地方。
- 它们提供了你每次都不需要从头开始编写的代码,比如重置样式。我一直认为使用星号选择器(*)重置 margin/padding 是一种很好的重置方式。我经常使用它。但是……如果你要开始一个大型的新项目,这个项目包含很多页面,需要运行很多年,并且会随着时间推移而发展,那么你应该立即投资一个更强大的重置样式。所有这些框架都以优秀的重置样式开始,涵盖所有方面,并在未来几年内为你提供保障。
- 它们缓解了跨浏览器兼容性问题。这一点你不能低估。我们都曾体验过在某个不合适的时机发现我们的网站在某个浏览器中出现故障的痛苦。框架旨在将其魔力带到所有浏览器中。
- 它帮助你养成良好的习惯。例如在项目中包含打印样式表。我总是打算创建一个,而且我经常这样做,但是如果我一开始就有一个,那么我创建它的可能性就会大得多。
- 它们鼓励基于网格的设计。这是一件好事。网格并不意味着单调乏味!它们只是帮助你获得更好的可读性、可扫描性、平衡视觉重量、灵活性、可扩展性和整体页面连贯性。
- 它们带有文档。如果你需要帮助入门,框架通常会提供一些支持文件。如果你正在设计一个要交付给客户的网站,这一点尤其有用。你可以告诉他们你使用了哪个框架,并将他们引导到该文档以获取支持请求。
- 它们奠定了基础。如果你正在使用像 YUI 这样的框架,如果你一直使用所有 YUI 相关的东西,那么你的生活将会变得更加轻松。它旨在协同工作并具有可扩展性。
坏处
- 为了真正从中受益并节省时间,你需要反复使用一个框架。它们都说你会节省时间,但我认为只有当你开始在一个框架中变得舒适时,这才是真的。这不像将你的马车升级到 T 型车,第二天你就能节省穿过城镇的时间。
- 它会改变你编写 HTML 的方式。我一直用一个名为“page-wrap”的 div 包裹我的网站。好吧,太糟糕了,在 logicss 中它被称为“container”。是的,这是一件小事,但我喜欢按照我自己的方式编写标记,而不是根据某个框架预先设定的类/ID 名称。
- 它们可能会导致代码臃肿。框架中可能设置了一些 CSS 样式来适应你永远不会使用的各种布局。如果你关心网页的每个字节,你最终会删除很多未使用的代码,这会破坏框架的意义。
- 它们可能会让客户变得危险。我曾经做过一个项目,客户希望所有内容都使用 YUI 完成,从网格开始。我花更多的时间学习 YUI 并试图弄清楚如何将一个已经设计好的 Photoshop 文件塞进它,而不是真正关注细节并专注于质量。最终我们完成了,但是为了使用这个框架,花费的时间很容易增加三倍,而我认为它最终并没有那么有用。
那么呢?
所以我说我可能会在写作过程中说服自己一些事情。我认为我已经做到了,那就是对我个人而言,CSS 框架并不适合我。我觉得总而言之,CSS 是一种相当简单的语言。我有点喜欢编写我自己的 CSS。我觉得不需要任何帮助,而且我无法想象任何框架能为我节省大量时间。但这只是我个人的想法,你应该自己做出决定。哎呀,我不是 Blue Flavor,而且他们非常喜欢它。
我同意你的观点。我从未使用过 CSS 框架,而且我可能永远都不会使用。尝试学习框架的类名是一件很麻烦的事情,而且它通常会生成你一开始并不需要的臃肿代码。我唯一包含在所有项目中的是 Eric Meyer 的 CSS 重置(即使对于小型网站也是如此)。我喜欢编写我自己的代码。
我和 John 持相同观点。我编写我自己的所有 CSS 并使用 Eric 的重置样式。但是,我理解框架对于学习 CSS 的人来说是有用的,但只有在他们通过玩 CSS 并对它有所了解之后,才开始使用框架。当我刚开始学习的时候,框架只会让我感到困惑。
本周的讨论很棒,CC。继续努力!
“我小时候还没有 CSS 框架。我不得不一直刷新页面直到得到正确的结果。”
这就是我们的网页恐怖故事。我从未使用过,而且可能也不会使用。但我确实认为它对新手有用……只要他们从中学到东西,并最终摆脱对它的依赖。
我正在采用一种混合设计的方法,事实上我没有使用框架本身,但就像任何优秀的 дизайнер 一样,我有一个非常轻量级的基本设置作为起点,然后在此基础上进行构建。
精彩的评论!我认为它们适合中级或高级 CSS 用户。试一试,它们可以节省时间。我构建了三个框架 Emastic、Hartija 和 Formy,我的建议是将其用于大型门户网站的模板构建和更复杂的网格结构,但如果你要构建小型网站,只需编写你自己的 CSS 代码即可。我不同意它们都“臃肿”,Emastic grid.css 的大小不到 2kb,最终你应该删除所有不使用的 CSS 类。使用 CSS 框架可能是一个个人决定,在某些情况下,从某个框架开始并根据你的需求进行个性化定制是明智之举。
Chris,
我同意框架不适合我。我通过阅读和使用免费模板来学习。拥有我自己的命名系统对我来说很棒。因为它是我的,而且我知道所有内容在哪里。
我还看到 SitePoint 上的一篇文章,由两位作者撰写,他们开了一个名为 Standards Suck 的博客。
他们写了一本书叫《你所知道的关于 CSS 的一切都是错误的》。他们试图说明 CSS 很麻烦,应该使用不受大多数旧版浏览器支持的 CSS 表格。除此之外还有其他内容。现在我认为我们正在逐渐放弃任何类型的表格。现在我确实认可 Site Point 聘用了非常有才华的作者,他们的书非常有用,但是,考虑到 CSS 和浏览器的现状,旧的 CSS 2.1 将会是未来的发展方向,直到每个人都决定升级他们的浏览器。我个人认为浏览器需要自动升级,微软需要放弃 IE6 及其以下版本。Firefox 3 为我自动升级了。太棒了。而且他们很好地推动了升级。微软没有做到这一点,他们创建了新产品,但没有很好地说服他们的客户升级他们的软件和浏览器。只需自动升级浏览器即可。这没什么不好,你没有上传臃肿的软件,而是一个新的网页浏览器。不要询问,直接执行。
CSS 更加通用,而且比纯 HTML 语法更容易学习。对我来说代码太多了。我知道 HTML,但我讨厌使用它,因为它需要花费很长时间才能编写。表格简直就是一种痛苦。
跨浏览器兼容的 CSS 确实很麻烦,但这确实是浏览器的问题,而不是我们的问题。我知道浏览器厂商都有自己的议程,比如微软,它拒绝使用与其他浏览器相同的框架,导致网页设计师不得不花费额外精力编写 CSS 或使用各种 hack 来实现高质量的设计。
Coda clips FTW
感谢你的回答。我过去也看过一些框架,但一直都是从头开始编写代码。我觉得我自己的自定义框架已经足够满足你提到的优势,并且避免了缺点。
感谢这篇文章!
使用 Yahoo! 的框架是一个学习过程。我还没有很好地利用任何一个框架。尽管我重用了很多自己写过的代码。我有点像是在边走边构建自己的框架。
从未使用过框架,不知道是否认为不使用框架直接上手更好?
做一个投票或者类似的东西 :)
我一直使用 BluePrint 风格大量修改 CSS,坦率地说,它对我来说非常宝贵。而且让我惊讶的是,许多付费主题也使用了这个框架。例如 GraphPaperPress.com,Robert Ellis 的各种令人惊叹的主题(通常构建在 Sandbox 之上)。
所以,如果对他们有用,那么在我学习的过程中肯定也对我有用。我现在可以查看 BluePrint CSS 并直观地了解它将呈现的样子,而不仅仅是一堆代码。在开始使用它之前,我很难理解作者使用 CSS 的各种方法。
至少在使用框架的情况下,事情相对一致。
但我是新手,而不是经验丰富的专业人士。我只是说它对我有效……
顺便说一句,这篇文章很棒,尽管我想我现在不太可能说它很糟糕吧。:0)
Graham Smith
好的帖子……在多年操作表格后,我刚刚开始学习 CSS。框架在刚开始转换时确实帮助了我,但现在我已经掌握(或者至少我认为我已经掌握)了 CSS,我发现框架有点乏味。
我个人也不是框架的粉丝……
我尝试使用过 960 网格 一段时间,它本身没有问题,只是框架不适合我。
好文章!
我目前使用的是 960 网格。不确定我是否会继续使用它。还需要再做几个网站才能确定它是否真的能节省时间或者带来更多麻烦。
不错的文章,伙计。
我认为框架更大的优势在于提供了一种一致且共享的构建方式。从开源社区的角度来看,这对于轻松共享内容至关重要。
也许单个开发者不会关注它,因为正如第 6 位评论者所说,他知道“所有东西在哪里”,但当其他人想在他编写的代码基础上工作时呢?不,这仅适用于单个开发,而框架对于社区来说非常有用。
Zikula Web 框架社区的一个小组正在使用 YAML,我们共享的内容非常一致、灵活且经过优化,可以以平衡的方式工作。
很明显,任何框架都有学习曲线,但正如文章所说,在你对它感到满意并学会使用它之后,你将节省大量时间!
你不认为最后一个问题仅仅是你需要克服的学习曲线吗,因为你对 YUI 一无所知?在这种情况下,最后一个问题在你的每个后续项目中都不存在,因为你已经了解了问题。
我认为框架最大的问题是文件大小,尤其是在大型项目中,你需要只包含必要的内容,否则你的客户将浪费大量不必要的带宽。
我发现框架并不臃肿,因为我只使用我需要的东西。例如 YUI。我只使用 reset.css、base.css 和 fonts.css(按此顺序)。我不使用布局样式或任何其他东西。只有这三个。
我通常使用自己的框架,因为 CSS 中有很多可重用的部分,而且您会发现自己从一个网站到另一个网站使用许多常见的样式。它只包含基本内容——重置、通用标题样式、粗体类、斜体类、圆角边框、左右浮动等等。
任何经验丰富的 CSS 专家都可能会发现自己编写自己的东西,使用别人的类名想法太烦人了。
之前从未使用过框架,也无法真正理解使用框架的好处。老实说,我认为坐下来学习一个框架并使用它,比使用我多年来一直开发的习惯编码风格花费更多时间。
除了 CSS 重置(我使用 Eric Meyer 的),我不认为过度复杂、臃肿的框架有什么用处。
也许我只是喜欢从头开始编写代码,自己动手,并且知道它能正常工作。
最好的框架……是你自己(为你自己)创建的框架。
框架不像量身定制的意大利西装那样合身。它们是大规模生产的西装。
当它说“类”时……它不可能是唯一的。
不要学习框架,学习 CSS。
从 960 中减去 480……与从 24 中减去 12 相比。
是的,我不喜欢 CSS 框架。我尝试过使用它们,但没有什么比自己编写代码更好了。
@Chris,我确实使用了“容器”和所有其他类似的小约定,因此通常很少需要修改……但我仍然喜欢创建自己的 CSS。
Chris,差不多 6 年过去了,你仍然保持你的偏好吗?
我很想看到一篇关于你对此的新观点的更新文章。