5

目的是什么：

两者的文档都非常稀疏，并没有真正解释为什么要使用它们以及目的是什么。

我试过自动重置。它似乎放置all: initial在您设计的每个元素上。在查看输出时，这似乎非常浪费。

它与以下有何不同：

* {
    all: initial,
    font-family: "Roboto"
}

查看自动重置的代码似乎就是这样做的：https ://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6

我不明白为什么这比使用更好*

4

2 回答 2

3

postcss-autoreset保护您免受 CSS 中的继承属性的影响。

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

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

由于非默认值，box-sizing您的所有尺寸都会损坏。因为 os 非标准line-height文本变得更大并且破坏了设计。

这是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;
}

结果，此自动插入的all: initial禁用用户box-sizing和line-height您的组件和您的组件在用户网站中的外观相同。

于 2016-11-22T22:33:42.660 回答
0

这比*您要创建可隔离组件时要好，这意味着您可以将组件集成到其他人的应用程序或网站中，例如插件或附加组件。

于 2016-11-22T11:37:45.797 回答