54

大家好——HTML5 BoilerplateHTML5 Reset是两个 HTML、CSS 和 JavaScript 模板,内置了许多现代最佳实践。他们的目标大致相同:

  • 快速、健壮、现代的 Web 开发
  • HTML5(呃!)
  • 跨浏览器规范化(包括对 IE6 和移动浏览器的支持)
  • 渐进增强和优雅降级
  • 性能优化
  • 不是框架,而是下一个项目的起点

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

4

4 回答 4

47

总的来说,这两个项目都旨在为从事 Web 项目的开发人员提供一个坚实的起点。它们都摆脱了许多开发人员发现自己为每个项目重新创建的许多乏味、有些容易出错的样板。他们如何进行的细节略有不同,但在大多数情况下,他们取得了相同的结果。

正如您所指出的,HTML5Boilerplate 已在一些构建脚本片段中添加,以帮助开发人员遵循最佳实践来加速他们的页面在服务器端项目方面,例如远期过期标头等。其中 HTML5Reset 项目是更关注语义、内容和样式。例如,HTML5Reset 为 HTML5 中的页面内容提供了更多示例结构(帮助向人们展示如何使用一些新元素),而 HTML5Boilerplate 则没有。

HTML5Boilerplate 包含的响应时间和页面速度部分变得越来越重要,因为越来越多的用户发现自己在移动平台上,并且随着谷歌增加页面响应时间对页面排名的影响。有很多论文表明页面响应时间的小幅增加会对您的网站的使用和感知方式产生可衡量的负面影响(尤其是在电子商务环境中……通常慢 100 毫秒的页面会减少销售百分比)。

在 CSS 方面,两个项目的大部分重置样式部分都非常相似,只是在基线设置方面存在一些细微差别。然而,针对 IE 的特定修复在很大程度上是相同的,HTML5Boilerplate 对 IE 如何设置表单元素等某些东西的样式(即复选框/单选按钮和有效/无效状态)比 HTML5Reset 有更多的控制权

HTML5Boilerplate 涵盖的两个主要 CSS 区域 HTML5Reset 不是常见的帮助类,可帮助使网站更易于访问,例如.hidden.visuallyhidden,以及对打印样式的一些重大调整,以使跨浏览器的打印更加相似,以及作为一些节省成本和可访问性的事情,例如使背景图像透明(不浪费碳粉),并将实际 URL 添加到链接和标题到缩写。

我强烈建议通读这两个项目的信息以及它们是如何在并排比较中做事的,因为它们的相似之处以及不同之处(以及它们背后的推理)提供了很多信息,并帮助我更好地决定哪些部分我想使用的每一个。

最终,就像任何“图书馆”类型的项目一样,您作为开发人员需要了解您在做什么,并且可能应该调整您的基线以满足项目的特定需求。

于 2011-04-19T16:30:20.770 回答
0

我的工作环境是以前的开发人员让公司同时使用JQueryPrototype ......而且它一团糟。我们不仅要摆脱兼容模式,还要考虑它导致的额外开销。调试时,Prototype 在 Firebug 中“劫持”调试消息,从而导致更多工作。令人抓狂的是,几个月来我一直在解决这个烂摊子,并且刚刚开始接近完成它....就在我要拔掉 Prototype 的插头时,我似乎总是找到另一个依赖它的部分...

正是出于这个原因,我每次都反对具有相似目的的框架组合。例如,无论您认为YUI Grids多么酷,如果您加载整个YUI 框架,您最好不要使用 Jquery、Moo或 Prototype。你只是不必要地让自己陷入困境。它会缩短加载时间(破坏用户体验),只会让开发人员头疼和做不必要的工作。

看看你网站的这个阶段,就像建立基础一样。你有机会使用任何你想用的东西,但你必须小心不要“把自己画到角落里”。因此,请使用基于您的资源可用的专用且一流的工具。不要只用可爱的东西!我们很幸运,因为许多非常高质量的工具都是免费的,所以我们有选择。但是要知道,您正在为您的网站未来的方向指引方向,如果您匆忙做出决定,您可能是像我这样必须处理后果的人。

所以,除非你永远不会使用另一个框架,否则我支持 Reset... 甚至只是做符合最高质量标准的 CSS。

于 2011-04-19T16:56:12.183 回答
0

你可以使用任何一个...

就像@murtaugh 说的(http://5by5.tv/bigwebshow/45),当你第一次从重置开始时,你不需要学习任何东西。根据我在研发部门工作的经验,当您需要演示或进行快速迭代时,您可以使用 Reset(或 Boiler,如果您已经知道的话)。当我需要构建产品以进行部署时,我转向 Boiler 只是因为它有更多的东西。对我有用,但现在因为我知道两者我都可以轻松使用其中任何一个。

于 2011-04-19T17:15:17.337 回答
0

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

所以我想这取决于你使用什么样的工具。Phonegap 似乎没有任何问题将我的代码编译到所有操作系统中。在模拟器中查看我的源代码看起来非常好......

因此,除非您尝试实现 polyfill,否则我真的看不出样板的意义。

于 2011-12-29T07:51:33.117 回答