在另一个论坛上阅读时，我遇到了 CSS 框架的世界。我一直特别关注的是BluePrint。我想知道是否有其他人遇到过 CSS 框架，建议哪个是最好的，是否值得付出努力？
Martin Clarke
问问题
42985 次
23 回答
140
CSS“框架”完全没有抓住重点。
CSS 不像 JavaScript，您可以在其中包含一个基础库/框架，然后从中调用函数和对象来完成更高级别的工作。CSS 框架可以给你的只是声明性规则：一些默认的浏览器规则重置的东西，一些强制将你的页面创作到的类样式，以及使用'float'和'clear'的布局规则。你可以自己用几行 CSS 来编写它，而不是拖入一百条框架规则的臃肿。
特别是“网格布局”的东西可以追溯到将您的演示文稿混合到您的标记中的糟糕过去。'div class="span-24"' 并不比表格好，您必须回到那里并更改标记以影响布局。而且我见过的所有框架都是基于固定像素的浮动框，因此无法创建可在各种窗口大小上访问的流动布局。
它是反向创作，只对害怕编写 CSS 规则的人有用。
于 2008-10-14T22:45:21.987 回答
27
所以，还没有人回答这个问题（虽然我看到了一些赞成票），所以我将至少尝试解决此提示中的第二个问题。
CSS 框架很棒；像任何其他框架一样，它们减少了开发时间，让您可以立即着手进行特定于站点的设计和 CSS。他们会考虑艰难的决定，因此您不必这样做。
不幸的是，使用框架（通常）有两个缺点：
该框架决定了 CSS 代码的整体结构和机制。现在，我不是在谈论 CSS 重置（它们本身很有用，但它们不是真正的框架）；我说的是一个诚实到好的框架，它已经决定了您将在文档中使用哪些语义标签等。因此，您依赖于框架，以及何时出现错误在框架中，您通常必须自己修复它。
框架不是忽视跨浏览器/高级 CSS 问题的借口。您总是会遇到它们，就像您使用 PHP 或 JavaScript 框架一样。你需要知道如何处理它们。有一句俗话说，在使用别人的框架之前，您应该先编写自己的框架。
快速浏览一下 Blueprint，我不会真正将其称为框架。也许是在顶部有一些额外的好东西的重置。
于 2008-10-14T22:49:33.663 回答
18
我看过 BluePrint 和其他一些，我推荐的唯一 CSS“框架”是YUI Grids
优点：
- 由最好的前端工程师之一 (IMO) (Nate Koechley) 撰写
- 很小。4KB
- 非常灵活（1000 种不同的布局）
- 支持流体宽度 (100%) 布局以及 750 像素、950 像素和 974 像素的预设固定宽度布局，并且能够轻松自定义为任意数字。
- 支持轻松自定义固定宽度布局的宽度。
- 模板列与源顺序无关，因此您可以将最重要的内容放在标记层的首位，以提高可访问性和搜索引擎优化 (SEO)。
- 自动清除页脚。无论哪一列更长，页脚都停留在底部。
- 小于 100% 的布局会自动居中。
- 有点语义的类名（比 top、left、right 等更好）
缺点：
- 与手写 HTML 和 CSS 相比，有很多额外的标记
- 需要一些学习来弄清楚如何做复杂的布局
正如其他人所发布的那样，CSS 没有真正的“框架”。重置样式表对布局也有很大帮助。我通常坚持使用重置样式表并从那里开始。但是如果你没有大量的 CSS 经验，YUI Grids 可以为你节省一些时间。
于 2008-10-14T23:03:31.857 回答
16
Compass是一个真正的 CSS 框架，因为它不仅为您提供模板（YUI 和蓝图），还提供可重用的构造和更高级别的声明，同时仍为您提供熟悉的 CSS 语法。
于 2008-12-02T22:54:20.683 回答
12
花时间学习和理解（真正理解！）一些 css 框架，如 BluePrint 和 YUI，以及像 Eric Meyer 的 css 重置。然后，花时间根据您的工作方法和您构建的网站类型来组合您自己的重置和/或框架。
就个人而言，我使用 Eric Meyer 的大部分重置以及我自己的一些类和重置，以及来自 BluePrint 和 YUI 的一些想法。
我最近观看了 Eric Meyer 关于 CSS 框架的演讲，他在演讲中提出了一个问题：“那么哪一个适合我？” 然后他通过展示一张空白幻灯片回答了这个问题。他的观点是，大多数重置和框架中肯定有一些有用的概念，但最适合您的是您自己编写的概念（值得付出努力）。
于 2008-10-15T19:38:45.373 回答
12
为什么使用 css 框架？
如果时间紧迫。
如果您不了解 css，并且不知道可以为您编写它的人。
如果您对标准等不太重视。
我认识的程序员非常乐于使用 blueprint 或 960，因为它允许他们自行组合布局，而无需求助于前端开发人员。这非常适合个人项目或资源有限的初创公司。
如果您已经对 CSS 有相当的了解，那么大概您已经拥有一个不错的库存布局库，因此您显然不需要框架。
但是，如果您是初学者并且只需要启动并运行某些东西，那么您可能会转向框架，因为它使基本布局更加简单，并且还解决了浏览器兼容性问题。
说了这么多，许多开箱即用的框架确实使用了一些可怕的类名等。我知道一些网站以框架为起点，然后使用自己的类和 id 标签对其进行定制。但显然，重写也涉及到一些工作。如上所述，使用 Compass 之类的东西确实有助于解决这个问题。
所以，CSS 框架——它们可以节省你的时间，但代价是语义。它们也可能会损害您对 CSS 的了解，但这更多地取决于您在学习这门学科上的投入程度。是否使用它们取决于您。
于 2009-04-21T09:45:08.273 回答
9
您必须问问自己，可用的框架在解决您的问题方面有多有效。它们符合您的要求吗？
通过使用框架，您可以在像素级别设置一些规则或细节，并将剩余的时间用于实施和生产。这是一个巨大的生产力提升。如果您发现自己在项目后期花时间调整了几个像素（微管理设计），这表明框架可能有用。
The Pragmatic Programmer中的提示 #17说：“程序接近问题域”。使用抽象层可以让您更接近解决布局的实际问题。例如：您可能可以专注于通过您拥有的额外时间来增强用户体验，而不是对像素进行细微的调整。
这并不是说你必须为了数量而牺牲质量。这是关于效率的。
在最近的一个项目中，我制作了自己的框架，因为我们的资源非常有限，而流行的框架并没有达到我想要的效果。然后，我将设计团队的 PSD 设置为与我部署的同一网格对齐。
框架不必是 CSS 的任何特定实现。它不一定是你从互联网上下载的臃肿的东西或实现过时想法的东西。这只是完成工作的一种技巧。如果一些编码人员已经拥有自己的框架并且甚至不知道它，我不会感到惊讶。事实上，如果您将 DOM 视为使用 CSS 扩展的一组默认元素，那么根据定义，这就是一个框架。
于 2010-03-31T11:55:37.747 回答
6
我没用过，是的，但我认为emastic可能是一个值得一试的好选择。它在范围上类似于蓝图，但也支持弹性布局（因此得名），您可以在 px、em 或 % 中指定值，甚至可以混合它们。
于 2008-12-02T22:49:01.973 回答
4
我认为Site Point 首席执行官 Kevin Yank 的这段视频演示将回答您的问题。我真的建议观看。
于 2010-06-21T07:18:56.263 回答
4
Compass 允许您使用自己的语义名称重命名框架的类和 id，因此您可能想检查一下。它还提供了对诸如 mixins 之类的普通 CSS 无法获得的东西的访问。
我对所谓的“CSS 专家”感到震惊，他们批评这些工具却没有真正深入研究并使用它们。它们是必不可少的吗？不。如果你喜欢自己的框架（你确实有一个自己的框架，对吧？CSS 框架只是一个精心定义的库——每个人都应该使用一个），那么一定要继续使用它。没有人强迫你使用其他框架，而且我没有看到使用框架的人告诉 CSS 纯粹主义者他们“做错了”。
从这样的角度批评框架只会暴露出不安全感和无知。例如，一个人会在不了解 CSS 的情况下使用 Compass 之类的工具的想法是可笑的。您是否意识到，一个框架通常不会为您编写所有的 CSS？您仍然可以在大多数框架的上下文中拆分并编写自己的 CSS。事实上，如果您不了解 CSS，您可能很快就会感到沮丧。
就我自己而言，我很欣赏拥有一个框架，因为它已经记录在案，由数百名其他用户测试过，而且我可以通过 Compass 应用我自己的类和 ID。如果我需要框架不适合的东西，那么我将自己编写代码。
于 2010-11-19T03:07:46.413 回答
3
AppFuse 的 Matt Raible 不久前举办了一场 CSS 框架竞赛，为 AppFuse 开发 CSS 框架。结果在这里公布。有一些变体，我自己也使用过一些，因为我使用 AppFuse 并且发现它们非常好。
我应该补充一点，这些 CSS 框架运行良好，因为它们用于主题应用程序。也就是说，如果您遵守规则，那么从一个切换到下一个就像更改属性文件中的一个值一样简单。
于 2008-10-14T23:14:24.127 回答
3
我在一个网站上使用 BluePrint 取得了很大的成功（我可以在此处提及该网站，但我确信该帖子会被标记为垃圾邮件！）。我不确定将来是否会使用它，因为我认为 CSS 的一个想法是没有硬编码布局逻辑。您不应该使用名为 span-24 和 span-12 的 css 元素来定义布局，而是使用 searchBox 和 mainContent 之类的元素。至少我是这么看的。
于 2008-10-15T04:27:09.690 回答
3
我找到了很好的链接：前 12 个 CSS 框架以及如何理解它们
于 2009-03-12T16:18:25.843 回答
3
这是我关于 CSS 框架的博客文章何时使用 CSS 框架？
于 2009-03-13T14:43:47.607 回答
3
我知道使用 CSS 框架并保留语义标记的唯一方法是使用更高级别的抽象。目前，我知道 Compass 是唯一一个成熟到可以使用的工具，但 Nicole Sullivan 似乎正在用她的“面向对象的 CSS”项目做一些有趣的事情。
我发现 Compass 对 Sass 混合的巧妙使用非常出色，并且朝着可维护语义标记的圣杯迈出了一大步。我认为我不想使用没有像 Compass 这样的抽象的 Blueprint 或 YUI 这样的框架来将表示类排除在标记之外。
顺便说一句，有一个漂亮的名为 Elastic 的 CSS 框架看起来足够好，我正在考虑将它添加到 Compass 中。
于 2009-05-18T20:51:47.723 回答
2
我相信 CSS 是关于简单的。目标是当您在 HTML 和样式表之间进行引用时，有一个或两个位置可以检查。添加更多的行，尤其是那些你没有写过并且可能不太熟悉的行，将成倍地增加复杂性，从而增加 CSS 代码的波动性。
我会在您编写布局时建议您的布局，并从中开发通用模板系统。虽然我喜欢让 CSS 更加模块化，但通常取决于设计，你的 CSS 可能是非常特定于案例的，根本不是模块化的。
于 2008-10-15T04:06:56.843 回答
2
我在一些一次性网站上使用过 Blueprint，它确实节省了时间，主要用于跨浏览器测试。
将演示代码添加到您的标记中确实很糟糕，尽管从好的方面来说它是可读的。虽然我喜欢“您可以在不触及标记的情况下重新设计”的概念，但如果您正在制作一个无论如何都不会发生的网站，并且您只需要昨天完成，那么蓝图就是值得一看的东西。
不过，它可以创建哪些类型的布局也需要权衡取舍。如果您从一开始就在严格的网格上对站点进行线框，则可以更轻松地将其转换到框架中而无需大惊小怪。
于 2008-10-15T04:21:16.067 回答
2
我使用过 BluePrint 和 YUI，但我总是对他们给他们的 id 和类的一些名称感到沮丧。
每个人都有自己的想法，但我更喜欢从头开始做事，但过了一段时间，您将开发一个流程，在该流程中您将使用以前的工作并将其应用于新项目，并进行一些调整以使网站看起来像您想要的那样喜欢它。
确保使用良好的命名约定，以防万一其他人进来编辑 css，那么他们就会很好地了解每个样式名称所指的内容。
于 2008-10-16T20:25:28.677 回答
2
克雷格，
Compass 正是您所寻找的：它允许您使用自己的名称重命名蓝图 CSS 类，例如“span-24”。它还使用变量和 mixin 扩展了 CSS 功能。确实，那些在没有检查 Compass 的情况下过早判断框架的人“没有抓住重点”。这有点像那些多年前告诉我们的那些人，我们在布局中使用 CSS 而不是 HTML 表格错过了重点。
-马特
于 2010-12-15T05:07:38.627 回答
1
查看http://www.ez-css.org/。最简单、最轻的 CSS 框架之一。:)
于 2010-12-06T02:55:45.063 回答
1
看看这个演示： http ://www.richstyle.org/demo-web.php 这个框架基于“HTML 标签应该足够”的想法。我认为可重用性是选择软件组件（包括 Web 框架）的最重要因素。对于 Web 框架开发人员，您对标准的承诺越多，您就越能保证可重用性。
于 2011-11-01T21:29:19.207 回答