什么是最好的CSS框架,它们值得付出努力吗?

CSS“框架”完全没有抓住要点。

CSS不像JavaScript,在JavaScript中可以包含一个基本库/框架,然后从中调用函数和对象来执行更高级别的工作。CSS框架所能提供的只是声明性规则:一些默认的浏览器规则重置内容,一些强制编写页面的类样式,以及使用“float”和“clear”的布局规则。您可以自己在CSS的几行中编写,而不必使用上百条框架规则。

“网格布局”的内容尤其可以追溯到将演示文稿与标记混合在一起的糟糕日子。”div class=“span-24”并不比一个表好,您必须回到那里并更改标记以影响布局。我看到的所有框架都是基于固定像素浮动框,因此不可能创建一个在各种窗口大小上都可以访问的液体布局。

所以,还没有人回答这个问题(尽管我看到了一些投票),所以 我至少要尝试在这个提示中解决第二个问题。

CSS框架很棒;与任何其他框架一样,它们减少了开发时间,并让您能够立即开始处理特定于站点的设计和CSS。他们考虑艰难的决定,所以你不必这样做。

1. 该框架规定了CSS代码的总体结构和机制。现在,我不是说CSS重置(它们本身很有用,但它们不是真正的框架);我说的是一个诚实到良好的框架,它已经决定了您将在文档中使用什么语义标记,等等。因此,您依赖于该框架,当框架中存在错误时,您通常必须自己修复它。

快速浏览一下蓝图,我不会真的称之为框架;也许是重新设置,再加上一些额外的糖果。

我已经看过BluePrint和其他一些,我推荐的唯一CSS“框架”是 YUI Grids

• 由最优秀的前端工程师之一(IMO)编写(Nate Koechley)
• 非常小。4KB
• 支持流体宽度(100%)布局以及750px、950px和974px的预设固定宽度布局,并能够轻松自定义任意数量。
• 支持为固定宽度布局轻松自定义宽度。
• 自动清除页脚。无论哪一列更长,页脚都保持在底部。
• 小于100%的布局将自动居中。
• 具有一定语义的类名(优于top、left、right等)

欺骗:

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

正如其他人所说,CSS没有真正的“框架”。 Reset

Compass 是一个实际的CSS框架,它不仅为您提供了模板(YUI和blueprint),还提供了可重用的结构和更高级别的声明,同时还提供了熟悉的CSS语法。

花点时间学习和理解(真正理解!)一些css框架,比如BluePrint和YUI,以及像Eric Meyer这样的css重置。然后,根据您的工作方法和您构建的站点类型,花时间整理您自己的重置和/或框架。

就我个人而言,我将Eric Meyer重置的大部分用于我自己的一些类和重置,再加上BluePrint和YUI的一些想法。

我最近观看了Eric Meyer关于CSS框架的演讲,他在演讲中提出了一个问题:“那么哪一个对我来说是合适的?”然后他通过展示一张空白幻灯片来回答这个问题。他的观点是,在大多数重置和框架中肯定有一些有用的概念,但最适合您的是您自己编写的概念(值得努力)。

• 如果你不知道css,也不知道 你

• 如果你不太看重 标准等。

我认识一些程序员,他们非常乐意使用blueprint或960,因为它允许他们自己组装布局,而无需求助于前端开发人员。这是个人项目或资源有限的初创公司的理想选择。

如果你已经对CSS有了相当的了解,那么你大概已经有了一个相当不错的库存布局库,所以你显然不需要框架。

然而,如果您是初学者,只需要启动并运行一些东西,那么您可能会求助于框架,因为它使基本布局更简单,并且还解决了浏览器兼容性问题。

话虽如此,许多现成的框架确实使用了一些可怕的类名等。我知道一些网站以框架为出发点,然后用自己的类和id标记对其进行定制。但很明显,重写过程中也涉及到一些工作。如上所述,使用指南针之类的东西确实有助于解决这个问题。

因此,CSS框架——它们可以节省您的时间,但要以语义为代价。它们也可能会损害你对CSS的了解,但这取决于你在学习这门学科上投入了多少资金。你是否使用它们取决于你自己。

您必须问问自己,可用的框架在解决问题方面有多有效。它们符合你的要求吗?

通过使用框架,您可以在像素级别设置一些规则或细节,并将剩余时间用于实现和生成。这是一个巨大的生产力提升。如果你发现自己在项目后期花时间调整了一些像素(对设计进行微观管理),这表明框架是有用的。

The Pragmatic Programmer 说:“程序接近问题域”。使用抽象层可以使您更接近于解决布局的实际问题。例如:您可以通过额外的时间集中精力增强用户体验,而不是对像素进行微调。

在最近的一个项目中,我制作了自己的框架,因为我们的资源非常有限,而流行的框架并没有达到我想要的效果。然后,我将设计团队的PSD设置为捕捉到我部署的同一网格。

框架不必是CSS的任何特定实现。它不一定是你从互联网上下载的臃肿的东西,也不一定是实现过时想法的东西。这只是一种完成工作的技巧。如果一些程序员已经有了自己的框架,甚至还不知道,我也不会感到惊讶。事实上,如果将DOM看作是用CSS扩展的一组默认元素,那么这就是定义的框架。

事实上,在过去的24小时里,我花了很大一部分时间独自调查这件事,呵呵。我的结论是一个很好的重置(我使用 YUI Reset ),也许还有别的东西来设定基准( YUI fonts 对我来说是值得的;也许蓝图的“额外好处”会在你的蓝图中)是个好主意。但是,一个“框架”——通常是 YUI grids ---太过严格,迫使您使用它们的类名、ID等,并且很少像手工制作的CSS那样适合您的站点。

简而言之:重置看起来很不错;最好消除所有的变化,例如列表的边距与填充、段落间距等。但这是我所能接受的。

我没用过是的,但我想 emastic 也许是一个值得一试的好选择。它在范围上类似于blueprint,但也支持弹性布局(因此得名),您可以在px、em或%中指定值,甚至混合它们。

我觉得指南针很神奇。一定要看到 screencast

我正在使用 960.gs

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

Compass允许您使用自己的语义名称重命名框架的类和ID,因此您可能需要检查它。它还提供了对普通CSS无法获得的内容的访问,比如mixin。

从这样的角度批评框架只会暴露出一种不安全感和无知。例如,一个人在不知道CSS的情况下使用Compass之类的工具的想法是可笑的。您是否意识到,框架通常不会为您编写所有CSS?您仍然可以在大多数框架的上下文中编写自己的CSS。事实上,如果你不知道CSS,你可能会很快感到沮丧。

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

AppFuse fame的Matt Raible不久前举办了一次CSS框架竞赛,为AppFuse开发CSS框架。结果已公布 here

我应该补充一点,这些CSS框架工作得很好,因为它们用于主题应用程序中。也就是说,如果您坚持这些规则,那么从一个规则切换到下一个规则就像在属性文件中更改一个值一样简单。

我已经在一个网站上成功地使用了BluePrint(我可以在这里提到这个网站,但我确信这个帖子会被标记为垃圾邮件!)。我不确定我将来是否会使用它,因为我认为CSS的一个想法是不需要硬编码布局逻辑。您不应该使用名为span-24和span-12的css元素来定义布局,而应该使用类似searchBox和mainContent的元素。至少我是这么看的。

我发现了一个很好的链接: Top 12 CSS Frameworks and How to Understand Them

When to use CSS framework?

据我所知,使用CSS框架并保留语义标记的唯一方法是使用更高级别的抽象。目前,Compass是我所知道的唯一一个成熟到可以使用的,但是Nicole Sullivan似乎正在她的“面向对象CSS”项目中做一些有趣的事情。

顺便说一句,有一个漂亮的CSS框架叫做Elastic,它看起来足够好了,我正在考虑将它添加到Compass中。

我会建议你的布局,因为你写他们和开发一个通用的模板系统。虽然我喜欢让CSS更加模块化,但这通常取决于设计,您的CSS可能是非常具体的,而不是模块化的。

我在一些一次性网站上使用过Blueprint,它确实节省了时间,主要是在跨浏览器测试中。

将表示代码添加到标记中肯定很糟糕,尽管从好的方面看,它是可读的。虽然我喜欢“你可以在不接触标记的情况下重新设计”的概念,但如果你正在创建一个无论如何都不会发生这种情况的网站,而你只需要在昨天完成它,那么蓝图是值得一看的。

不过,在它可以创建哪些类型的布局方面也存在权衡。如果您从一开始就在一个严格的网格上对站点进行线框,那么将更容易以最小的麻烦转换到框架中。

我用过BluePrint和YUI,但我总是对他们给id和类起的一些名字感到失望。

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

克雷格,

Compass就是您要寻找的:它允许您使用自己的名称重命名Blueprint CSS类,如“span-24”。它还通过变量和mixin扩展CSS功能。的确,那些在没有检查Compass的情况下过早判断框架的人是“没有抓住要点”。这有点像那些几年前告诉我们,我们在布局中使用CSS而不是HTML表,这是没有抓住要点的人。

-马特

退房 http://www.ez-css.org/ . 最简单、最轻的css框架之一。:)

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