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


106

在另一个论坛上阅读,我接触到CSS框架的世界。我一直在专门看的是BluePrint。我想知道是否还有其他人遇到过CSS框架,建议哪种方法最好,是否值得付出努力?

Answers:


140

CSS“框架”完全没有意义。

CSS与JavaScript不同,您可以在CSS中包含基础库/框架,然后从中调用函数和对象来进行更高级别的工作。所有CSS框架都可以为您提供声明性规则:一些默认的浏览器规则重设内容,一些类样式(必须强制向其编写页面)以及使用“ float”和“ clear”的布局规则。您可以自己用几行CSS编写代码,而不必花一百个框架规则。

特别是“网格布局”的东西可以追溯到将演示文稿混合到标记中的糟糕年代。'div class =“ span-24”'并不比表格好,您必须回到那里并更改标记以影响布局。而且我所看到的所有框架都是基于固定像素的浮动框,因此无法创建可在各种窗口尺寸上访问的液体布局。

它是向后创作的,仅用于害怕写CSS规则的人。


14
那你还没看过指南针。就是这样。 act-as-architect.blogspot.com/2008/11/introducing-compass.html
达斯汀

3
我同意。我仅使用CSS重置并开发与应用程序有关的我自己的样式。
Hemanshu Bhojak,2009年

3
我现在正在看指南针,或者更像是无礼,还是哈姆?无论如何,这太疯狂了。就像CSS一样很难学习,而如果您已经知道CSS就是那么讨厌就足够了。
AmbroseChapel

11
Sass,Haml和Compass是不同的东西。Haml和Sass通常在一起,Haml允许您使用更少的标记编写html,Sass允许您使用更少的代码编写CSS以及使用常量。Compass只是对流行的CSS框架的Sass解释。
Sam Murray-Sutton

2
我自己看到的BluePrint和其他框架在某些浏览器中失败。使用CCS的经验越丰富,您越有机会知道要覆盖使其几乎在任何地方都可以使用的内容。这些“框架”只会使生活变得更加艰难,并带来意想不到的结果。
eugeneK 2010年

27

因此,目前还没有人回答这个问题(尽管我看到了一些反对意见),所以 我将至少尝试在此提示中解决第二个问题。

CSS框架很棒。与其他任何框架一样,它们减少了开发时间,使您可以立即进行针对特定地点的设计和CSS的工作。他们考虑艰难的决定,所以您不必这样做。

不幸的是,使用框架有两个缺点(通常):

  1. 该框架规定了CSS代码的整体结构和机制。现在,我不是在谈论CSS重置(这些重置本身很有用,但它们不是真正的框架)。我说的是一个诚实可靠的框架,它已经决定了您将在文档中使用的语义标记等。因此,您将依赖于框架以及何时存在错误。在框架中,最常见的是您必须自己修复它。

  2. 框架不是忽略跨浏览器/高级CSS问题的借口。就像使用PHP或JavaScript框架一样,您总是会遇到它们。而且您需要知道如何处理它们。俗话说,在使用别人的框架之前,应该先编写自己的框架。

快速浏览一下Blueprint,我不会真正将其称为框架。也许重置,上面还有一些额外的东西。


18

我看过BluePrint和其他一些东西,我唯一推荐的CSS'framework '是YUI Grids

优点:

  • 由最好的前端工程师之一(IMO)撰写(Nate Koechley)
  • 很小。4KB
  • 非常灵活(1000种不同的布局)
  • 支持宽幅(100%)布局以及750px,950px和974px的预设固定宽度布局,并能够轻松自定义为任意数量。
  • 支持轻松自定义宽度以固定宽度的布局。
  • 模板列是与源顺序无关的,因此您可以将最重要的内容放在标记层的前面,以提高可访问性和搜索引擎优化(SEO)。
  • 自清除页脚。无论哪一列更长,页脚都会停留在底部。
  • 小于100%的版面会自动居中。
  • 某种语义类名(比上,左,右等更好)

缺点:

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

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


16

从某种意义上说,Compass是一个实际的CSS框架,它不仅为您提供模板(YUI和蓝图),而且还为您提供可重用的结构和更高级别的声明,同时仍为您提供熟悉的CSS语法。


12

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

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

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


好主意,我会研究的。
马丁·克拉克

到目前为止可能是最好的答案!
David Yell

12

为什么要使用CSS“框架”?

  • 如果您有时间压力。

  • 如果您不了解CSS,并且不认识可以为您编写CSS的人。

  • 如果您对标准等不是太珍贵。

我知道程序员对使用蓝图或960感到非常满意,因为它允许他们自行编写布局,而无需求助于前端开发人员。对于个人项目或资源有限的初创公司来说,这是理想的选择。

如果您已经对CSS有足够的了解,那么大概您已经拥有一个不错的库存布局库,因此您显然不需要框架。

但是,如果您是初学者,并且只需要启动并运行某些东西,则可以使用框架,因为它可以使基本布局更简单,并且还可以解决浏览器的兼容性。

说了这么多,许多现成的框架确实使用了一些可怕的类名等。我知道有些网站将框架作为起点,然后使用自己的类和id标签对其进行了自定义。但是很明显,重写也涉及一些工作。如上所述,使用Compass之类的东西确实有助于解决该问题。

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


9

您必须问自己,可用框架在解决问题上的效果如何。它们符合您的要求吗?

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

实用程序员技巧17说:“程序靠近问题域”。使用抽象层可以使您更接近解决布局的实际问题。例如:您也许可以集中精力用额外的时间来增强用户体验,而不是对像素进行细微的调整。

这并不是说您必须为数量牺牲质量。这与效率有关。

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

框架不必是CSS的任何特定实现。它不一定是您从互联网下载的东西downloaded肿,也不是实施过时的想法的东西。这只是一项完成工作的技术。如果有些编码人员已经拥有自己的框架,甚至不知道它,我也不会感到惊讶。实际上,如果您将DOM视为使用CSS扩展的一组默认元素,那么按照定义,这就是一个框架。


6

实际上,我过去24小时中的大部分时间都是自己调查的,嘿。我的结论是,进行一次不错的重置(我使用了YUI Reset),也许还有其他设置基线的东西(在我的情况下,YUI字体很有价值;也许BluePrint的“额外好处”就在您的手里)是个好主意。但是,“框架”(通常类似于YUI网格)过于严格,迫使您使用其类名,id等,并且很少像手工CSS那样适合您的站点。

简而言之:重置似乎很不错;最好消除列表边距与填充之间的所有差异,或段落间距等。但这是我所能接受的。


6

我还没有使用过,但是我认为过分自信可能是值得检查的好选择。它在范围上类似于蓝图,但也支持弹性布局(因此得名),您可以指定px,em或%的值,甚至混合它们。


5

指南针,我认为是惊人的。确保您看到了截屏视频

我在一些网站上使用960.gs,发现它非常简单容易,值得付出努力。为我省去了很多布局工作。确保检查自定义CSS生成器,该生成器将不再具有960像素的固定宽度。



4

Compass使您可以使用自己的语义名称来重命名框架的类和ID,因此您可能需要检出它。它还提供对普通香草CSS所没有的东西的访问,例如mixins。

我对所谓的“ CSS专家”感到震惊,他们批评这些工具而没有真正使用它们。它们必不可少吗?不。如果您喜欢自己的框架(确实有一个自己的框架,对吗?一个CSS框架只是一个经过仔细定义的库,每个人都应该使用一个),那么一定要继续使用它。没有人会强迫您使用其他框架,而且我看不到使用框架的人告诉CSS纯粹主义者“他们做错了”。

从这样的角度对框架进行批判,既暴露出一种不安全感,也暴露出一种无知。例如,有人会在不了解CSS的情况下使用诸如Compass之类的工具,这是可笑的。您知道吗,框架通常不会为您编写所有CSS?您仍然可以在大多数框架的上下文中突破并编写自己的CSS。实际上,如果您不了解CSS,可能会很快感到沮丧。

对我自己来说,我很高兴拥有一个框架,因为它已经被文档记录,已经由数百个其他用户测试过,而且我可以通过Compass应用自己的类和id。如果我需要框架不适合的东西,那么我将自己编写代码。


3

AppFuse的成名者Matt Raible曾有一段时间参加CSS框架竞赛,为AppFuse开发CSS框架。结果在这里发布。有一些变体,我自己用了一些,因为我使用AppFuse并发现它们非常好。

我应该补充一点,因为这些CSS框架在主题应用程序中使用,所以效果很好。也就是说,如果您遵守规则,那么从一个规则切换到下一个规则就像更改属性文件中的一个值一样简单。


3

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




3

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

我发现Compass巧妙地使用Sass mixins非常出色,并且是朝着可维护的语义标记的圣杯迈出的一大步。我不希望使用没有诸如Compass之类的抽象的Blueprint或YUI之类的框架来使表示类脱离标记。

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


2
一段时间后,经过进一步思考:我认为诸如Blueprint之类的CSS框架经常陷入错误的困境。但是,像Compass这样的CSS 抽象对于认真的Web设计工作是必不可少的。CSS太局限了,无法在没有一点帮助的情况下真正实现其设计目的(标记和表示的分离)。指南针提供了该帮助。(也许其他图书馆也这样做,但是Compass是我所知道的唯一一个。)
Marnen Laibow-Koser 2009年

1
后来:我现在认为您不一定需要Compass。你是什么做的必要性是无礼的话。正如我在之前的文章中所解释的那样,Sass提供的抽象功能非常强大,并且使CSS易于管理。
Marnen Laibow-Koser

2

我相信CSS是关于简单性的。目的是要在HTML和样式表之间进行引用时检查一两个位置。添加更多的行,尤其是您没有写过并且可能不太熟悉的行,将成倍增加复杂度,从而增加CSS代码的易变性。

我会在编写布局时建议您的布局,并据此开发通用的模板系统。尽管我喜欢使CSS更具模块化,但是通常会视设计而定,但是CSS可能是针对特定案例的,而根本不是模块化的。


2

我已经在一些一次性站点上使用了Blueprint,它无疑节省了时间,主要是在跨浏览器测试中。

尽管从正面看,它是可读的,但肯定会在标记中添加演示代码。尽管我喜欢“您可以在不修改标记的情况下进行重新设计”的概念,但是如果您要创建的站点实际上根本不会发生,而您只需要昨天完成,那么Blueprint是值得关注的东西。

不过,在可以合理创建的布局类型中也存在一些折衷。如果您从一开始就在严格的网格上对站点进行构架,则将工作转移到框架中的工作变得非常容易,而不必大惊小怪。


2

我曾经使用过BluePrint和YUI,但是我总是对它们提供其ID和类的某些名称感到沮丧。

对于每个人来说,但我都喜欢从头开始做事,但是一段时间后,您将开发一个过程,在该过程中,您将使用以前的工作并将其应用于新项目,并进行一些调整以使网站看起来像您想要的那样喜欢它。

确保使用良好的命名约定,以防万一其他人来编辑css,那么他们将很好地了解每种样式名称所指的含义。


2

克雷格

指南针是您要寻找的东西:它允许您使用自己的名称重命名Blueprint CSS类,例如“ span-24”。它还通过变量和mixin扩展了CSS功能。确实,那些过早地判断框架却没有检出Compass的人就是“错了”。就像是几年前告诉我们的人,我们通过使用CSS而不是HTML表格进行布局而忽略了这一点。

-马特



1

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.