想象一下,您编写了一个组件并将其发布到npm.您使用了BEM或CSS模块,因此选择器是隔离的.但是一些开发人员将您的组件带到了网页：

* {
  Box-sizing: border-Box;
  line-height: 2
}

由于非默认的盒子大小,所有尺寸都会被破坏.因为os非标准的行高文本变得更大并且破坏了设计.

以下是EmojiMart组件中此类问题的一个真实示例.

postcss-autoreset会将all：initial放到组件CSS中的每个选择器：

.component {
  all: initial; /* added by postcss-autoreset,you didn’t write it */
  width: 100px;
  padding: 10px;
}
.component_title {
  all: initial; /* added by postcss-autoreset,you didn’t write it */
  height: 20px;
}

因此,这会自动插入所有：初始禁用组件中的用户Box-sizing和line-height,并且组件在用户网站中以相同的方式显示.