什么是最好的CSS框架和它们值得的努力？

Question

读另一个论坛，我们来到世界各地的CSS框架。一个我已经具体地看到的是 蓝图.我想知道，如果其他人遇到CSS框架，表明这是最好的，如果他们是值得的努力？

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

我已经看过了蓝图和其他几个人的唯CSS'框架'我的建议是 衣网

赞成:

• 书面通过一个最好的前端工程师有(海事组织)(Nate Koechley)
• 非常小。4KB
• 非常灵活的(1000不同的布局)
• 支持体的宽度(100%)的布局，以及预先设定宽布局在750px,950px，并974px，并能够很容易地定义为任何数字。
• 支持简单的定制的宽度为固定宽度的布局。
• 模板列源以独立的，所以你可以把你的最重要的内容首先在标记层为改善和优化搜索引擎(SEO)。
• 自我清除脚注。无论其列长，该页脚停留在底层。
• 布小于100%是自动为中心。
• 有些语义classnames(比上，左，右等)

缺点：

• 许多额外的标记相比较的手写HTML和CSS
• 需要一定的学习怎么做到的复杂的布局

作为其他已经发布的，没有真正的'框架'为CSS。 重置 样式有很大的帮助与布局。我通常坚持的一个重的样式表和从那里走。但如果你没有很多的CSS经验锐网可能会救你一些时间。

Answer 4

指南针是一个真正的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已，然后大概是你有一个像样的图书馆股的布局，因此显然你不需要一个框架。

但是，如果你是初学者，只是需要得到的东西并运行，然后你可能会转向了一个框架，因为它使基本布局要简单得多，并解决浏览器的兼容性。

有说所有的许多出框架的框做使用某些可怕的类名称等。我知道的一些网站，已经采取了一个框架作为起点，然后定制他们自己的类和标识的标签。但显然有一些工作涉及的在于改写。使用类似的指南针，如上所述，不会有助于获得。

因此，CSS框架-他们可以节省你的时间，为此付出的代价是语义。他们也可能会伤害你的知识CSS，但是更多了你多少投资于学习的主题。你是否利用他们是你的。

Answer 7

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

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

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

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

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

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

Answer 8

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

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

Answer 9

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

Answer 10

指南针我觉得很棒。确保您看到截屏视频。

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

Answer 11

我认为将回答您的问题。”= = nofollow noreferrer“>我真的建议观看它。

Answer 12

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

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

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

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

Answer 13

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

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

Answer 14

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

Answer 15

我找到了很好的链接：前12个CSS框架以及如何理解它们

Answer 16

以下是我关于CSS框架的博客文章何时使用CSS框架？

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

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

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

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

Answer 20

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

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

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

Answer 21

克雷格，

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

-Matt

Answer 22

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

Answer 23

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