HTML5 Boilerplate vs. HTML5重置 [英] HTML5 Boilerplate vs. HTML5 Reset

问题描述

嘿大家 HTML5 Boilerplate 和 HTML5重置是两个HTML，CSS和JavaScript模板与许多现代最佳实践内置。他们的目标大致相同：

Hey everyone — HTML5 Boilerplate and HTML5 Reset are two HTML, CSS, and JavaScript templates with a lot of modern best practices built-in. Their goals are largely the same:

• 快速，健壮，现代的网络开发


• HTML5 ！）


• 跨浏览器规范化（包括对IE6和移动浏览器的支持）


• 逐步增强和优雅降级


• 性能优化


• 不是框架，而是下一个项目的起点

• Fast, robust, modern Web development
• HTML5 (duh!)
• Cross-browser normalization (including support for IE6 and mobile browsers)
• Progressive enhancement and graceful degradation
• Performance optimizations
• Not a framework, but the starting point for your next project

显然，它们在功能上非常相似。他们的实现在什么方面是不同的（例如，可能使用不同的技术实现特定于IE的CSS修复）？他们在范围上有什么不同吗？看起来像HTML5 Boilerplate有点大（构建工具，服务器配置等），但很难知道它超越HTML5重置当它涉及到实际的网站，人们会看到。

Obviously, they're very similar in function. In what ways are their implementations different (for example, perhaps IE-specific CSS fixes are achieved using different techniques)? Are they at all different in scope? It seems like HTML5 Boilerplate is a bit larger (build tools, server configuration, etc.), but it's hard to know where it goes beyond HTML5 Reset when it comes to the actual site that people will see.

推荐答案

一般来说，这两个项目都为开发Web项目的开发人员提供了一个坚实的起点。他们都摆脱了很多繁琐的，有些什么易错的样板文件，许多开发人员发现自己重新创建每个项目。

In general, both projects set out to provide a solid starting point for developers working on web projects. They both get rid of a lot of the tedious, some-what error-prone boilerplate that many developers find themselves re-creating for each project. The details in how they go about it are slightly different, but for the most part, they achieve the same results.

HTML5Boilerplate有，如你所指出的，在一些构建中添加了它们，它们的细节在稍微不同，但在很大程度上，他们实现相同的结果。 - 帮助开发人员按照最佳实践来加速其服务器端项目（例如远期到期标题等）的速度，因为HTML5Reset项目更侧重于语义，内容和样式。例如，HTML5Reset在HTML5中为页面的内容提供了更多的示例结构（以帮助向人们展示如何使用一些新的元素），而HTML5Boilerplate没有。

HTML5Boilerplate has, as you noted, added in some build-script pieces to help developers follow best practices to speed up their pages in terms of server-side items, such as far-future expires headers, etc. where-as the HTML5Reset project is more focused on the semantics, content, and styling. For example, HTML5Reset has more example structure for the content of the page in HTML5 (to help show people how to use some of the new elements), whereas HTML5Boilerplate does not.

HTML5Boilerplate包含的响应时间和页面速度部分越来越重要，因为越来越多的用户发现自己在移动平台上，而且Google会提高效果网页响应时间在网页排名。有很多论文显示页面响应时间的小幅增加对您的网站如何使用和感知（尤其是在电子商务设置 ...经常是100毫秒

The response-time and page speed parts that HTML5Boilerplate includes get more and more important as more users find themselves on mobile platforms, and as Google increases the effect page response times have on page rank. There are lots of papers that show a small increase in the page response time has a measurable negative impact on how your site is used and perceived (especially in an eCommerce setting...often a 100ms slower page will get percentage less things sold).

在CSS前面，两个项目的大多数重置样式部分都是非常相同的，有一些细微的差别在什么基线设置。 IE特定的修补程序，但是，在很大程度上是相同的，HTML5Boilerplate断言比HTML5Reset更多的控制如何IE样式一些事情，如表单元素（即复选框/单选按钮和有效/无效状态）

On the CSS front, the majority of the reset style section for both projects is very much the same, with some minor differences in what the baseline is set to. The IE specific fixes, however, are largely the same, with HTML5Boilerplate asserting a bit more control than HTML5Reset over how IE styles some things like form elements (ie. check box / radio buttons and valid / invalid states)

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

Two major CSS areas that HTML5Boilerplate covers that HTML5Reset does not are common helper classes to assist with making sites more accessible, such as .hidden and .visuallyhidden, as well as some substantial adjustments to the print styles that serve to both make printing more similar across browsers, as well as some cost-savings and accessibility things like making background images transparent (to not waste toner), and adding the actual URL to links and the title to abbreviations.

我强烈建议阅读这两个项目的信息，做并行的比较，因为相似之处，以及差异（和他们背后的推理）是非常有用的，并帮助我更好地决定每个我想使用的部分。

I would highly suggest reading through both projects' info and how they do things in a side-by-side comparison because the similarities, and also the differences (and the reasoning behind them) is quite informative and has helped me to better decide what parts of each I wanted to use.

最后，就像任何库项目一样，你作为开发人员需要了解你在做什么，并且可能应该调整你的基线以满足项目的特定需求。

Ultimately, just like any "library" sort of project, you as the developer need to understand what you are doing and probably should tweak your baseline to meet the particular needs of the project.

这篇关于HTML5 Boilerplate vs. HTML5重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！