[聚合文章] CSS Reset与Reboot

解析reset与新的reboot概念

CSS的reset通常是为了处理跨浏览器间的样式一致性问题，比如在页面中放置一个无样式的 <button> ，Chrome中会应用 padding: 1px 6px; 的样式，Firefox中会应用 padding: 0px 8px; 的样式，使用CSS reset会对元素的padding属性赋予一个新值，这样在所有浏览器上都会保持一致性。

关于Reset的历史

• 2007年Jeff Starr整理了一些 不同的reset方案
• 最早的是04年Tantek Çelik的 undohtml.css ，去除了默认样式

• 之后是很热门的 the Meyar reset ，加入了一些H5元素，不过思路还是移除默认样式，如下这种经典的代码:

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  

• 随着HTML5的发展，出现了如Richard Clark的 HTML5 Reset ，依然保留了Meyar reset的魂

  article,aside,details,figcaption,figure,
  footer,header,hgroup,menu,nav,section { 
      display:block;
  }
  

随之而来的Normalize.css

Normalize.css 是CSS reset中一次较大的变革，体现在如下几处：

1. 分析评估了所有跨浏览器中样式不同的元素。以前的CSS reset是寥寥几行代码，而未压缩与规范文本的Normalize.css是 447行 。
2. 没有移除跨浏览器已具有一致性的元素样式。比如h2-h6元素就没有样式区别，而对于古怪的h1元素就有一定的重置。
3. 推荐的使用方法是适当 alter ，而不仅仅是 include 。比如对于 <pre> 标签的设置有一行是 font-family ，你可以改成想要的字体就会有对应的reset效果。

它的代码很易读，无需spec即可获知代码含义

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

Opinionated Reset

关于Opinionated的意思参见 这里 。

1. Vanilla CSS Un-Reset
   Vanilla CSS Un-Reset在reset样式后还re-style了元素。包括将body的字体尺寸设为pt，设置特殊的单间隔字体栈(比如使用 ol ol ol ol 这样的选择器)，助于排版的类等等。
2. MiniReset.css
   抹掉字体样式，保留了一些默认值，添加一些不存在跨浏览器问题不过通用的属性(box-sizing)，添加有助于响应式设计的属性。

3. santize.css

   /*
   * Remove the text shadow on text selections (opinionated).
    * 1. Restore the coloring undone by defining the text shadow (opinionated).
    */
   
   ::-moz-selection {
     background-color: #b3d4fc; /* 1 */
     color: #000000; /* 1 */
     text-shadow: none;
   }
   
   ::selection {
     background-color: #b3d4fc; /* 1 */
     color: #000000; /* 1 */
     text-shadow: none;
   }
   

   对于定制的属性在文档说明处都添加了opinionated字样，均是作者经过调查和现在浏览器最佳实践后作出的修改。

上面的library或者reset都是作者或多或少根据自己的需求所构建的，有自己的范式与规则习惯，也就是为何称为”Opinionated Reset”

Reboot

reboot是一个新成员，追溯到2015年的Bootstrape 4。它是基于Normalize.css的，仅使用元素选择器来设置opinionated样式，额外的样式使用类选择器设置。比如重置 <table> 的基础样式为baseline，并提供 .table 、 .table-bordered 等其他样式。

Reboot中重载的属性

• 使用rem设置块元素的margin属性
• 对所有元素应用border-box
• 避免使用margin-top
• 在font-相关属性使用inherit

reboot并没有单独的仓库，是bootstrap的一部分，它的 文件 与 文档 。

你可以使用类来定义样式，不过若使用reset的话，则无需重载那个用来处理跨浏览器一致性reset类型的类。

根据浏览器支持情况裁剪reset

需要关注一下 Browserslist 这个工具，可以用来声明项目所支持的浏览器版本并用标准化格式表现。

可以构建一个声明了所支持浏览器和版本的reset，对于browserslist配置中该项目不支持的特定浏览器，可移除其对应的CSS。 PostCSS Normalize 就是这样的一个实现。