什么是最好的CSS框架，他们值得努力吗？

Question

在另一个论坛上阅读我遇到了CSS框架世界。我一直特别关注的是BluePrint。我想知道是否有其他人遇到过CSS框架，建议哪个是最好的，是否值得付出努力？

Answer 1

CSS'框架'完全忽略了这一点。

CSS与JavaScript不同，您可以在其中包含基础库/框架，然后从中调用函数和对象以执行更高级别的工作。所有CSS框架都可以为您提供声明性规则：一些默认的浏览器规则重置内容，一些强制创建页面的类样式，以及使用“float”和“clear”的布局规则。你可以自己用几行CSS来编写它，而不是拉入一百个框架规则。

“网格布局”的内容尤其可以追溯到将演示文稿混合到标记中的糟糕时期。 'div class =“span-24”'并不比表更好，你必须回到那里并更改标记以影响布局。我见过的所有框架都是基于固定像素浮动框，因此无法创建可在各种窗口尺寸上访问的液体布局。

它是向后创作的，仅供那些害怕编写CSS规则的人使用。

Answer 2

所以，没有人回答这个问题（虽然我看过几个赞成票），所以我打算至少尝试在这个提示中解决第二个问题。

CSS框架很棒;与任何其他框架一样，它们可以缩短开发时间，让您立即开始使用特定于站点的设计和CSS。他们考虑做出艰难的决定，所以你没必要这样做。

不幸的是，使用框架（通常）有两个缺点：

1. 框架决定了CSS代码的整体结构和机制。现在，我不是在谈论CSS重置（这些都是有用的，但它们不是真正的框架）;我说的是一个诚实到好的框架，它已经决定了你将在文档中使用什么语义标签，等等。因此，你依赖于框架，当有一个bug时在框架中，您最常需要自己修复它。

2. 框架不是忽视跨浏览器/高级CSS问题的借口。您将不可避免地遇到它们，就像使用PHP或JavaScript框架一样。你需要知道如何处理它们。有一种常见的说法是，在使用别人之前，你应该首先编写自己的框架。

快速浏览一下蓝图，我不会把它称为框架;也许重置一些额外的好东西。

Answer 3

我看过BluePrint和其他一些人，我推荐的唯一CSS'框架'是YUI Grids

优点：

• 由一位最优秀的前端工程师（IMO）撰写（Nate Koechley）
• 非常小。 4KB
• 非常灵活（1000种不同的布局）
• 支持流体宽度（100％）布局以及750px，950px和974px的预设固定宽度布局，并且可以轻松自定义任意数字。
• 支持轻松自定义宽度布局的宽度。
• 模板列与源顺序无关，因此您可以将最重要的内容放在标记层中，以提高可访问性和搜索引擎优化（SEO）。
• 自我清理页脚。无论哪一列更长，页脚都会停留在底部。
• 小于100％的布局会自动居中。
• 有些语义类名（比top，left，right等更好）

缺点：

• 与手写HTML和CSS相比，有很多额外的标记
• 需要学习如何进行复杂的布局

正如其他人发布的那样，CSS没有真正的“框架”。 Reset样式表也对布局有很大帮助。我通常坚持使用重置样式表并从那里开始。但如果你没有很多CSS经验，YUI Grids可以节省你一些时间。

Answer 4

Compass是一个实际的CSS框架，它不仅为您提供模板（YUI和蓝图），还提供可重用的构造和更高级的声明，同时仍然为您提供熟悉的CSS语法。

Answer 5

花时间学习和理解（真正理解！）一些CSS框架，如BluePrint和YUI，以及css重置像Eric Meyer的。然后，根据您的工作方法和您构建的网站类型，花时间将您自己的重置和/或框架组合在一起。

就我个人而言，我使用了大部分的Eric Meyer重置了一些我自己的类和重置，以及BluePrint和YUI的一些想法。

我最近看了Eric Meyer发表关于CSS Frameworks的演讲，他问了一个问题：“哪一个对我来说是正确的？”然后，他通过显示空白幻灯片回答了问题。他的观点是，大多数重置和框架都有一些有用的概念，但最适合你的是你为自己写的那个（值得付出努力）。

Answer 6

为什么要使用css'框架'？

• 如果你有时间压力。

• 如果您不了解css，请不要 认识一个可以写作的人 你。

• 如果你没有过分珍贵 标准等。

我知道那些非常乐意使用蓝图或960的程序员，因为它允许他们自己组合一个布局，而不需要转向前端开发人员。这非常适合个人项目或资源有限的创业公司。

如果你已经掌握了很好的CSS知识，那么你可能已经拥有了一个不错的库存库，所以你显然不需要框架。

但是，如果您是初学者并且只需要启动并运行，那么您可能会转向框架，因为它使基本布局更加简单，并且也解决了浏览器兼容性问题。

说了这么多，开箱即用的许多框架确实使用了一些可怕的类名等。我知道一些网站以框架为起点，然后用自己的类和id标签进行自定义。但显然，重写也涉及到一些工作。如上所述，使用像Compass这样的东西确实有助于解决这个问题。

因此，CSS框架 - 它们可以节省您的时间，但代价是语义。它们也可能会损害您对CSS的了解，但这更多取决于您在学习该主题方面投入了多少资金。是否使用它们取决于你。

Answer 7

您必须问自己，可用框架在解决您的问题方面有多么有效。他们符合您的要求吗？

通过使用框架，您可以在像素级别设置一些规则或细节，并将剩余的时间用于实施和生成。这是一个巨大的生产力提升。如果您发现自己花费时间在项目后期（微管理设计）花费一些时间来调整事物，那么这表明框架可能很有用。

The Pragmatic Programmer中的提示＃17说：“程序靠近问题域”。使用抽象层可以让您更接近解决布局的真正问题。例如：您可以专注于通过额外的时间来增强用户体验，而不是稍微调整像素。

这并不是说你必须牺牲数量的质量。这是关于效率的。

在最近的一个项目中，我创建了自己的框架，因为我们的资源非常有限，并且流行的框架没有按照我的意愿行事。然后，我将设计团队的PSD设置为捕捉到我部署的同一网格。

框架不一定是CSS的任何特定实现。它不一定是你从互联网上下载的东西或实现过时想法的东西。这只是一项完成工作的技巧。如果一些程序员已经拥有自己的框架并且甚至不知道它，我也不会感到惊讶。实际上，如果您将DOM视为一组使用CSS扩展的默认元素，那么根据定义，这是一个框架。

Answer 8

在过去的24小时里，我实际上花了很大一部分时间来调查这个问题，呵呵。我的结论是一个很好的重置（我使用YUI Reset），也许还有别的东西来设置基线的东西（YUI fonts在我的情况下是值得的;也许BluePrint的“额外好东西”将在你的身上）是个好主意。但是，一个“框架”---通常类似于YUI grids ---限制性太强，迫使你使用他们的类名，ID等，很少适合你的网站，就像手工制作的CSS一样

简而言之：重置似乎相当不错;消除所有变化是很好的。列表的边距与填充，段落间距等等。但就我所说的那样。

Answer 9

我没有使用它是的，但我认为emastic可能是一个值得检查的好选择。它类似于范围内的蓝图，但也支持弹性布局（因此名称），您可以在px，em或％中指定值，甚至可以混合它们。

Answer 10

指南针我觉得很棒。确保您看到screencast。

我在一些网站上使用960.gs，发现它非常简单易用，值得付出努力。为我节省了大量的布局工作。确保检查固定宽度为960像素的自定义CSS生成器。

Answer 11

Compass允许您使用自己的语义名称重命名框架的类和ID，因此您可能需要检查它。它还提供了一些你无法使用普通的CSS（例如mixins）获得的东西。

我对所谓的“CSS专家”感到震惊，他们批评这些工具而没有真正挖掘和使用它们。它们必不可少？不。如果您喜欢自己的框架（您确实拥有自己的框架，对吗？CSS框架只是一个精心定义的库 - 每个人都应该使用它），然后一定要继续使用它。没有人强迫你使用其他框架，我没有看到使用框架的人告诉CSS纯粹主义者他们“做错了。”

从这样的角度批评框架只会暴露出不安全感和无知感。例如，一个人在不知道CSS的情况下会使用像Compass这样的工具这个概念是可笑的。你知道，一个框架通常不会为你编写所有的CSS吗？您仍然可以在大多数框架的上下文中分解并编写自己的CSS。事实上，如果你不了解CSS，你很快就会感到沮丧。

对于我自己，我很欣赏有一个框架，因为它已经被文档记录，经过数百名其他用户的测试，我可以通过Compass应用我自己的类和ID。如果我需要框架不适合的东西，那么我将自己编码。

Answer 12

我认为Site Point首席执行官Kevin Yank的this video presentation会回答你的问题。我真的建议观看它。

Answer 13

我在网站上使用BluePrint取得了很大的成功（我可以在这里提到这个网站，但我确信这个帖子会被标记为垃圾邮件！）。我不确定将来是否会使用它，因为我认为CSS的一个想法是没有硬编码的布局逻辑。您不应该使用名为span-24和span-12的css元素来定义布局，而是使用searchBox和mainContent。至少这就是我的看法。

Answer 14

AppFuse成名的Matt Raible在一段时间内开始进行CSS框架竞赛，为AppFuse开发CSS框架。结果发布here。有一些变化，我自己使用了一些，因为我使用AppFuse并发现它们非常好。

我应该补充一点，这些CSS框架运行良好，因为它们用于主题应用程序。也就是说，如果您遵守规则，那么从一个规则切换到另一个规则就像更改属性文件中的一个值一样简单。

Answer 15

我找到的好链接：Top 12 CSS Frameworks and How to Understand Them

Answer 16

以下是我关于CSS Frameworks When to use CSS framework?

的博客文章

Answer 17

我知道使用CSS框架并保留语义标记的唯一方法是使用更高级别的抽象。目前，Compass是我所知道的唯一一款足够成熟的产品，但Nicole Sullivan似乎正在通过她的“面向对象的CSS”项目做一些有趣的事情。

我发现Compass'聪明地使用Sass mixins是出色的，并且向可维护语义标记的圣杯迈出了一大步。我认为我不想使用像Blueass或YUI这样的框架而不使用Compass这样的抽象来保持表示类不在标记中。

顺便说一下，有一个看起来很漂亮的名为Elastic的CSS框架看起来很好，我正在考虑将它添加到Compass。

Answer 18

我相信CSS与简约有关。目标是在HTML和样式表之间引用时，有一两个地方可以检查。添加更多行，尤其是那些你没有编写并且可能不熟悉的行，会以指数方式增加复杂性，从而增加CSS代码的易变性。

我会在你编写它们时建议你的布局，并从中开发一个通用的模板系统。虽然我喜欢使CSS更加模块化，但通常并且取决于设计，你的CSS可能是特定于案例的，而不是模块化的。

Answer 19

克雷格，

Compass是您正在寻找的东西：它允许您重命名您的Blueprint CSS类，例如＆＃34; span-24＆＃34;用你自己的名字。它还使用变量和mixin扩展CSS功能。实际上，那些在没有检查指南针的情况下过早地判断框架的人是错过了这一点。＆＃34;它有点像几年前告诉我们的那些人，我们通过使用CSS代替HTML表格来忽略这一点。

-Matt

Answer 20

我使用过BluePrint和YUI，但我总是对他们提供的id和类的一些名字感到沮丧。

对于他们自己，但我更喜欢从零开始做事，但过了一段时间，你开发了一个过程，在这个过程中你将使用你以前的工作并将其应用于新项目，并做一些调整，使网站看起来像你想要的方式。

一定要使用一个好的命名约定，以防万一其他人进来编辑css，然后他们会很清楚每个样式名称所指的是什么。

Answer 21

我在几个一次性网站上使用过Blueprint，这绝对节省了时间，主要是在跨浏览器测试中。

它确实很难将标记代码添加到您的标记中，尽管从好的方面来说它是可读的。虽然我喜欢“你可以在不触及标记的情况下进行重新设计”的概念，但如果你正在制作一个真正不会发生的网站而且你只需要在昨天完成，那么Blueprint就是值得关注的。

但是，它可以通过哪些类型的布局进行权衡。如果您从严格的网格开始对网站进行线框化，那么转换到框架中会更容易，而且操作起来非常简单。

Answer 22

结帐http://www.ez-css.org/。最简单，最轻的css框架之一。 ：）

Answer 23

看看这个演示： http://www.richstyle.org/demo-web.php 该框架基于“HTML标签应该足够”的想法。 我认为可重用性是选择软件组件的最重要因素，包括Web框架。 对于Web框架开发人员，您对标准的承诺越多，就越能保证可重用性。