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
您的组件和您的组件在用户网站中的外观相同。