2011-04-19 46 views
54

嘿,大家好,— HTML5 BoilerplateHTML5 Reset是两个HTML,CSS和JavaScript模板,内置了很多现代最佳实践。他们的目标在很大程度上是相同的:HTML5 Boilerplate与HTML5重置

  • 快速,稳健的,现代的Web开发
  • HTML5(!咄)
  • 跨浏览器正常化(包括IE6和移动浏览器支持)
  • 渐进增强和优雅降级
  • 性能优化
  • 没有一个框架,但你的下一个项目的起点

显然,它们在功能上非常相似。他们的实现在哪些方面有所不同(例如,可能使用不同的技术实现IE特定的CSS修复)?它们的范围有什么不同?看起来好像HTML5 Boilerplate有点大(构建工具,服务器配置等),但是当涉及到人们会看到的实际网站时,很难知道它超出了HTML5 Reset的范围。

回答

47

一般而言,这两个项目都是为开发Web项目的开发人员提供一个坚实的起点。他们都摆脱了许多繁琐的,一些容易出错的样板,许多开发人员发现他们自己为每个项目重新创建。他们如何去做的细节略有不同,但在大多数情况下,他们取得了相同的结果。

正如您所指出的那样,HTML5Boilerplate已添加到某些构建脚本中,以帮助开发人员按照最佳实践加快其服务器端项目(如远期过期标题等)的页面速度。 HTML5Reset项目更侧重于语义,内容和样式。例如,HTML5Reset对于HTML5中的页面内容有更多的示例结构(以帮助向人们展示如何使用一些新元素),而HTML5Boilerplate则没有。

随着越来越多的用户在移动平台上发现自己,并且Google增加了效果page response times have on page rank,HTML5Boilerplate包含的响应时间和页面速度部分变得越来越重要。有很多论文显示页面响应时间的小幅增加会对您的网站的影响产生可衡量的负面影响used and perceivedespecially in an eCommerce setting ...通常慢100ms的页面会减少销售量的百分比)。

在CSS方面,两个项目的大部分重置样式部分都非常相似,基线设置的部分有一些细微差异。然而,IE特定的修补程序基本上是相同的,HTML5Boilerplate比HTML5Reset更能控制IE样式,如表单元素(例如复选框/单选按钮和有效/无效状态)。

两个主要HTML5Boilerplate覆盖HTML5Reset的CSS区域不是常见的帮助类,它们可以帮助您更方便地访问网站,例如.hidden.visuallyhidden,以及对打印样式进行一些实质性的调整,这些打印样式既可以使浏览器的打印更加类似,也可以作为一些节省成本和可访问性的东西,例如使背景图像透明(不要浪费碳粉),并将实际的URL添加到链接和标题缩写中。

我强烈建议阅读这两个项目的信息,以及他们如何做并排比较的事情,因为相似之处,以及差异(和背后的推理)是相当丰富的信息,并帮助我更好地确定每个我想使用的部分。最终,就像任何“库”类项目一样,作为开发人员,您需要了解自己在做什么,并且可能应该调整基准以满足项目的特定需求。

+1

您可以提供指向页面响应时间与页面排名参考的论文的链接吗? – 2011-04-19 16:49:18

+0

@s_hewitt - 按照您的要求,添加引文。 – cdeszaq 2011-04-19 16:50:04

+0

很好的答案,cdeszaq。 – Francisc 2011-04-19 18:39:14

0

我在一个环境中工作,在这个环境中,以前的开发人员使用JQueryPrototype来使公司陷入混乱。我们不仅需要解决兼容模式问题,而且还需要考虑它带来的额外开销。在调试时,Prototype“劫持”Firebug中的调试信息,这导致更多的工作。而令人生气的部分是,我已经解开了这个烂摊子好几个月,刚刚开始接近完成它......而就在我即将拉上Prototype插件时,我似乎总是找到另一个依靠它的部分...

这就是为什么我每次都反对具有类似目的的框架组合。例如,无论你认为YUI Grids有多酷,如果你加载整个YUI Framework,你最好不要在做jquery,Moo或Prototype。你会不必要地陷入困境。它杀死了加载时间(其中wrecks the user experience),只是给开发人员头痛和不必要的工作。

看看你的网站的这个阶段,像建立基础。你有机会使用任何你想使用的东西,但是你必须小心,不要让自己陷入一个角落。因此,请使用基于您资源的专用工具和一流工具。不要只是使用一些可爱的东西!我们很幸运,许多高质量的工具都是免费的,所以我们有一个选择。但是要知道,你正在为未来指引你的网站的方向,而且如果你的决定是匆忙做出的,你可能就像我这样的人必须处理后果。因此,除非你永远不会使用另一个框架,否则我支持重置...或甚至只是执行高质量标准的CSS。

+1

我完全同意你对JavaScript框架的想法,但我们在这里讨论的HTML5框架大多是标记,而不是活动代码,而且大部分都几乎相同。具体的CSS略有不同,但像一个优秀的开发人员遇到的情况一样,重要的部分是理解你将要使用的内容,而不是盲目地应用它。没有开发人员对语义HTML和CSS都有深刻理解,HTML5框架都无法实现项目的全部潜力。 – cdeszaq 2011-04-19 17:01:10

+2

在我最后的演出中,我遇到了一个使用jQuery和Dojo的项目。我认为这只是他们第一次接触AJAX。但后来我们聘请了一家非常昂贵的咨询公司,它使用jQuery和Ajax.net发回代码。然后我放弃并退出。 – 2011-04-21 19:55:57

+1

对于框架来说,这是一个很好的建议,但是我发现很难想象它是如何适用于这两种不是框架的节省时间的工具。 – JohnC 2011-12-28 22:05:31

0

您可以使用一个...

像@murtaugh说(http://5by5.tv/bigwebshow/45)你不需要学习任何东西当u先用复位启动。根据我的经验,在R部门工作时,当需要演示或做快速迭代时,可以使用Reset(或者如果你已经知道它,则为Boiler)。当我需要构建产品进行部署时,我只是因为有更多的东西而转向锅炉。 适用于我,但现在因为我知道我可以很容易地使用任何一个。

0

我其实很想说使用传统的reset.css是最好的...我发现我的移动应用程序没有兼容性问题。但是,我正在使用jQuery移动框架开发这些应用程序。

所以我想这是真正有条件的,你正在使用什么样的工具。 Phonegap似乎没有任何问题编译我的代码到所有操作系统。在仿真器中查看我的源代码看起来非常好......

所以我真的没有看到样板的要点,除非您尝试实现polyfills。