目的是什么:
> PostCSS Autoreset
> PostCSS Initial
文档在两者上都非常稀疏,并没有真正解释为什么要使用它们以及目的是什么.
我试过autoreset.它似乎将所有元素放在首位:每个元素的首字母.在查看输出时,这似乎非常浪费.
它有什么不同:
* {
all: initial,font-family: "Roboto"
}
看一下autoreset的代码,它似乎就是这样做的:https://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6
我不明白为什么这比使用*更好
最佳答案
postcss-autoreset保护CSS中的继承属性.
想象一下,您编写了一个组件并将其发布到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,并且组件在用户网站中以相同的方式显示.