I've been wanting to write this article for a long time - since to be exact. It's been in the back of my mind and bugging me forever. I'm glad I'm finally going to sit down and bang this post out despite there probably being a ton of great resources out there on this.

我一直想写这篇文章很久了 -确切地说自年以来。 它一直在我的脑海中，永远困扰着我。 我很高兴我终于可以坐下来把这个帖子扔了，尽管那里可能有很多很棒的资源。

If you don't already know, is an awesome front-end framework! I've been using it for a really long time, and I think it helps out all types of developers. It doesn't matter if you are front-end or back-end developer, complete noob or an advanced coding robot from the future. Bootstrap is a robust and flexible set of tools that helps you code awesome websites for all use cases.

如果您还不了解， 是一个很棒的前端框架！ 我已经使用了很长时间了，我认为它可以帮助所有类型的开发人员。 无论您是前端还是后端开发人员，将来的完整菜鸟还是高级编码机器人，都没有关系。 Bootstrap是一组强大而灵活的工具，可帮助您为所有用例编写出色的网站。

recently came out of alpha and into Beta after being in it that super-early build for like a year. If you're thinking, "Wow, it's taking forever and is still in beta...", don't. What the is doing is no small task. They're literally pushing out code that is used by ** of ()! On top of that, CSS exist in a land where every individual developer is super opinionated about the right and wrong way to do things. It's no easy task.

日前在其在于超早期建设的像一年后，来到α，β，进入了。 如果您在想：“ 哇，它永远都在使用中，并且仍处于测试阶段... ”， 请不要 。 正在做的任务不小。 他们从字面上推出了* *的使用的代码（ ）！ 最重要的是，CSS存在于每个开发人员都对做事的正确和错误方式都持超级看法的国家。 这不是一件容易的事。

话虽这么说... (With all that being said...)

Let's talk about a really neat new feature in Bootstrap 4 called Reboot. In this post, I'll blab a bit about the history of resets, Bootstrap, some cool features of Reboot, and how you can start using it today.

让我们谈谈Bootstrap 4中一个真正好的新功能，称为Reboot 。 在这篇文章中，我将对重置的历史，Bootstrap，Reboot的一些很酷的功能以及今天如何开始使用它进行一些探讨。

( )

in the simplest terms possible is Bootstrap 4's "reset". It's a little bit different than your typical reset though.

用最简单的方式是Bootstrap 4的“重置”。 但是，它与典型的重置略有不同。

埃里克·梅耶（Eric Meyer）重置 (The Eric Meyer Reset)

I'm pretty sure the term "reset" first came around when Eric Meyer, a guy who is kind of like the godfather of CSS, came out with a to literally reset all browsers to look the exact same. The problem with this is, it really reset things. Literally everything looked the same regardless of the element. Elements like h1s were the same as h2s. This meant front-end people would have to build their own base styles. This is both a good and bad thing.

我敢肯定，“重设”一词最早是在Eric Meyer（他有点像CSS的教父）出来时提出的，该可以将所有浏览器重置为完全相同的 。 问题在于，它确实使事情复位。 从字面上看，无论元素如何，一切看起来都是相同的。 像h1 s这样的元素与h2 s相同。 这意味着前端人员将必须建立自己的基本样式。 这既是好事，也是坏事。

Many front-end people in the early days would build out their own "resets" on top of this since their base styles stayed consistent.** This also unfortunately left some noobs / beginners in the dust who never really grasped the importance of having a base.** For example, people who would do something like this:

早期，许多前端人员会在此基础上建立自己的“ resets”，因为他们的基本风格保持一致。**不幸的是，这也使一些菜鸟/初学者陷入了尘土，他们从未真正掌握过拥有它们的重要性。 **。例如​​，会执行以下操作的人：

/* Heading 2 Base Styles */h2 {
         color: #13335f;    font-weight: 700;    margin: 10px 0 20px;    font-size: 30px;    FLOAT: LEFT;   /* Just kill me. why.......... */}

This went on for what felt like forever. If you're old enough to have lived through these small hustle projects, congratulations on being a survivor. In my humble opinion, a lot of back-end developers hate CSS to this day because of dealing with things like this.

这种感觉一直持续到永远。 如果您足够大，可以经历这些小小的忙碌项目，那么祝贺您成为幸存者。 以我的拙见，许多后端开发人员至今都讨厌CSS，因为它处理这样的事情 。

Normalize.css (Normalize.css)

So after these dark-ages of having to deal with some really messed up stylesheets, a lot of people's personal "base" resets started becoming popular and shared. The most popular was definitely .

因此，在这些不得不处理一些真正混乱的样式表的黑暗时代之后，许多人的个人“基础”重置开始变得流行和共享。 最受欢迎的肯定是 。

Normalize was different because it reset your browser styles and gave you some dead-simple, super pretty base styles. It made building some nice projects a breeze. It gained serious popularity.

规范化有所不同，因为它会重置您的浏览器样式，并为您提供一些简陋，非常漂亮的基本样式 。 它使构建一些不错的项目变得轻而易举。 它得到了严重的普及。

Normlalize.css doesn't use border-box by default though, requiring that you add it somehow. I can't imagine doing any front-end development without this property. Normalize.css is still active today, widely used, and you can you can still easily swap this. I honestly don't know why it's not default for all elements, but I'm sure there's some good reason since many projects still use normalize as their go-to reset.

Normlalize.css默认情况下不使用border-box ，要求您以某种方式添加它。 没有这个属性，我无法想象进行任何前端开发 。 今天， Normalize.css仍然处于活动状态，并被广泛使用，您仍然可以轻松地进行互换。 老实说，我不知道为什么不是所有元素都不都是默认值，但是我敢肯定有一个很好的理由，因为许多项目仍然使用normalize作为重置。

传入的Reboot.css (Incoming Reboot.css)

Now comes Reboot.css. Reboot.css is like a normalize.css 2.0 in my opinion. It has some awesome "reset" type features:

现在是Reboot.css 。 我认为Reboot.css就像normalize.css 2.0。 它具有一些很棒的“重置”类型功能：

• It uses box-size: border-box; by default on all elements.
  它使用box-size: border-box; 默认情况下在所有元素上。
• "Resets" browser styles for consistent cross-browser development.
  “重置”浏览器样式以实现一致的跨浏览器开发。
• Keeps a simple and natural base-style on elements.
  在元素上保持简单自然的基本样式。
• Carries a little bit of an opinion on how to write your CSS for the modern web.
  对如何为现代Web编写CSS提出一点意见。
• Made by the Bootstrap people (lots of trust)
  由Bootstrap员工制作（很多信任）

Bootstrap 4 puts all this into a single page making it dead-simple to use.

Bootstrap 4将所有这些都放在一个页面中，使其使用起来非常简单。

框架的最终未来 (The Eventual Future of Frameworks)

CSS is becoming more and more featured-pack by the day. Things like "" or "" are getting wider browser-adoption making frameworks less necessary for doing complex layouts easily.

CSS每天都变得越来越功能强大。 诸如“ ”或“ ”之类的东西正越来越广泛地被浏览器采用，这使得框架对于轻松进行复杂的布局变得不必要了。

On top of that, you have some ridiculously cool tools like LESS, SASS/SCSS, and PostCSS becoming the default go-to for writing styles making it easier to automate tedious tasks such as creating a set of button styles.

最重要的是，您拥有诸如LESS ， SASS/SCSS和PostCSS类的荒谬酷炫的工具，成为编写样式的默认工具，使自动化繁琐的任务（例如创建一组按钮样式）变得更加容易。

In enough time, I can easily see frameworks becoming 95% smaller or the birth of a new, super simple, bare-naked framework that gains massive popularity. We're not quite there yet, but, heck, that might be even be Reboot one day.

在足够的时间内，我可以轻松地看到框架缩小了95％，或者诞生了一种新的，超级简单的，裸露的框架 ，该框架获得了广泛的欢迎。 我们还没有到那儿，但是，哎呀，有一天甚至可能要重启。

( )

So, how can we test Reboot.css out now and actually see what the heck it is?

那么，我们如何才能立即测试Reboot.css并真正了解它到底是什么呢？

You could go to the and just dig through the docs and get going, or you can just mess with this codepen I made. It has every single element on a single webpage and lets you easily swap out different resets to see the difference.

您可以转到然后仔细阅读文档并继续进行操作，也可以将我制作的这个Codepen弄乱。 它在单个网页上包含所有单个元素 ，可让您轻松换出不同的重置以查看差异。

If you want to just find the CSS and test yourself, check these resources:

如果您只想查找CSS并进行测试，请检查以下资源：

( )

If you read the intro paragraphs, you'll already know this. Reboot.css uses box-sizing: border-box; by default for all elements. This in my opinion is the most distinguished difference between normalize.css.

如果您阅读介绍性段落，您将已经知道这一点。 Reboot.css使用box-sizing: border-box; 默认情况下，所有元素。 我认为这是normalize.css之间最明显的区别。

So, it's safe to say it's "responsive ready" out-of-the-box. Here's what it looks like at the top of the file:

因此，可以肯定地说它“响应就绪”。 这是文件顶部的外观：

*,* ::before ,* ::after  {    box-sizing : border-box ;}

If you're familiar with this, it's taken from 's arguably super famous post.

如果您对此很熟悉，则摘自的超级著名文章。

( )

快速REM演示 (A Quick REM Demo)

REMs are just not for font-sizing, it can be used for all spacing. To show you just how much Reboot.css embraces this, checkout the demo below:

REM并非仅用于字体大小调整，它可用于所有间距。 为了向您展示Reboot.css对此有多少支持，请Reboot.css以下演示：

解释的计量单位差异 (Unit of Measurement Differences Explained)

CSS3 introduced a new unit of measurement called rem. There's kind of a huge debate amongst us nerds on the best use for sizing on the web. These rems have a pretty darn good solution to the whole debate. It all comes down to accessibility for users (resizing of font-sizes / screen-sizes) and maintainability / consistency for front-end developers.

CSS3引入了一种新的度量单位，称为rem 。 在我们的书呆子之间，关于在Web上调整大小的最佳用途方面存在着巨大的争论。 这些rem ■找一个相当不错的解决了整个辩论。 所有这些都归结为用户的可访问性（调整字体大小/屏幕大小的大小）以及前端开发人员的可维护性/一致性。

Here it is summarized:

这里总结一下：

• px: Good for consistency, bad for accessibility
  px ： 一致性好，可访问性差
• em: Good for accessibility, just okay for maintainability / consistency
  em ： 对于可访问性很好，对于可维护性/一致性也很好
• rem: Good for accessibility, really good for maintainability / consistency
  rem ：有利于可访问性，确实有利于可维护性/一致性

That's a huge TL;DR: of the whole debate, but there's a of to learn a bit more about units of measurement.

在整个辩论中，这是一个很大的TL; DR：但是有的可以学到更多关于度量单位的知识。

REM如何工作 (How REMs Work)

Let's assume you know nothing more than pixels as a unit of length. Going to try to break this down in laymen terms without code.

假设您只知道像素作为长度单位。 试图用外行术语将其分解为无代码。

So, you know that 100 pixels is always going to be 100 pixels long regardless if you're have your operating system show large fonts, are on a 4k monitor, or those 100 pixels are in a 1000 or 5000 pixel sized container. It doesn't matter. 100 pixels is 100 pixels. This is good for consistency but bad for usability since it doesn't scale well to user-specifc preferences.

因此，您知道无论您的操作系统显示大字体，在4k显示器上还是在100或5000像素大小的容器中，这100像素总是会长100像素。 没关系 100像素等于100像素。 这对一致性有好处，但对可用性不利，因为它不能很好地适应用户指定的首选项。

The unit em was first introduced to try and help with this "scaling" issue by being a computed unit of measurement. This means the sizing is always relative to something, in this case the parent. So in a basic example, you could say: "Instead of being 100px long, be 10% of the 1000px long container" or 0.1em". This way if the container was resized by the user / device / system / whatever it would remain consistent in perceived length.

最初引入单位em是通过计算的度量单位来尝试和帮助解决“缩放”问题。 这意味着大小总是相对于某物（在这种情况下为父物）。 因此，在一个基本的例子，你可以说：“而不是被100px长，是10％的1000px长的集装箱”或0.1em 。”这样，如果容器是将用户/设备/系统调整/不管它会保持感知长度一致。

This is cool, except it gets real crazy when you have an em be relative to another em. Or worse, an em that is relative to an em that is relative to an em. Things get complicated and messy and become impossible to deal with overtime.

这很酷，除了当您将一个em相对于另一个em变得非常疯狂时。 或者更糟的是，一个em是相对于em是相对于em 。 事情变得复杂和混乱，无法处理加班。

I like to think of rems as a simple em. Everything is always relative to the root (aka, the body tag or html tag). So if your root was 1000px, your length is 0.1rem regardless of container, settings, whatever.

我喜欢将rem视为一个简单的em 。 一切总是相对于根（aka， body标记或html标记）。 所以，如果你的根是1000px ，你的长度是0.1rem不管容器，设置什么的。

( )

Have you ever designed a website to see slight differences between operating systems? Mac's probably look the best but sometimes fonts will look not as crisp on Windows?

您是否曾经设计过一个网站，以查看操作系统之间的细微差别？ Mac可能看起来最好，但有时字体在Windows上看起来不那么清晰 ？

This is because of how systems render fonts. Reboot.css embraces using whatever their native font stack is to the operating system.

这是因为系统如何渲染字体。 Reboot.css包含使用其操作系统的本机字体堆栈。

This actually means 2 things.

这实际上意味着两件事。

1. Near-zero load time for the default font
   默认字体的加载时间接近零
2. Uses the font the user wants / looks best for them
   使用用户想要/最适合他们的字体

Here's the code. Check-out all the fallbacks!

这是代码。 查看所有后备广告！

/* SCSS Variable */$font-family-sans-serif:    // Safari for OS X and iOS (San Francisco)    -apple-system,    // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android    system-ui,    // Chrome < 56 for OS X (San Francisco)    BlinkMacSystemFont,    // Windows    "Segoe UI",    // Android    "Roboto",    // Basic web fallback    "Helvetica Neue", Arial, sans-serif !default;/* CSS */font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

( )

Okay, maybe it's not dead, but reboot.css makes the following elements no longer have any top margin:

好吧，也许它没有死 ，而是reboot.css使得以下元素不再有顶边距：

• h1
  h1
• h2
  h2
• h3
  h3
• h4
  h4
• h5
  h5
• h6
  h6
• p
  p
• ul
  ul
• ol
  ol
• dl
  dl
• pre
  pre

This actually makes a ton of sense. I can vouche for this method. I never use margin-top in any of my base css that I have ever done. It makes things fall into place a lot easier when things are CMS powered and the content can be anything. I would even suggest adding table to this list.

这实际上很有意义。 我可以担保这种方法。 我从来没有在我做过的任何基本CSS中使用margin-top。 这让事情变得明朗起来轻松了很多当事情CMS供电，内容可以是任何东西。 我什至建议将table添加到此列表中。

( )

Reboot also provides a clean and naked style to all common elements. Things like blockquote, tables, forms and much more. This goes a bit more to be able to have clean and simple form fields to get up and running with.

重新启动还为所有常见元素提供了干净裸露的样式。 诸如blockquote ， tables ， forms等之类的东西。 为了使它具有干净且简单的表单字段来启动和运行，还需要做更多的工作。

( )

By default Reboot.css uses touch-action: manipulation to speed up any delay that might exist for touch users.

默认情况下，Reboot.css使用touch-action: manipulation来加快触摸用户可能存在的任何延迟。

Here's the full code:

这是完整的代码：

a,area,button,[role="button"],input:not([type=range]),label,select,summary,textarea {
       -ms-touch-action: manipulation;      touch-action: manipulation;}

You can see that clicking links, buttons, and form fields will be a lot quicker and responsive on touch devices.

您会看到单击链接，按钮和表单字段将更快并且在触摸设备上响应Swift。

( )

Overall, I would say Reboot.css is a great project and continuation of standardizing the modern web with familiar web practices. You can learn more about reboot.css at the following links:

总的来说，我会说Reboot.css是一个伟大的项目，并且是通过熟悉的网络实践对现代网络进行标准化的延续。 您可以通过以下链接了解有关reboot.css更多信息：

翻译自: