css - postcss-autoreset 和 postcss-initial 的目的是什么

Question

目的是什么:

• PostCSS Autoreset
• PostCSS Initial

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

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

它与以下内容有何不同:

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

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

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

更好

Answer 1

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 在你的组件和你的组件查找在用户网站中也是如此。