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

前端之家收集整理的这篇文章主要介绍了postcss-autoreset和postcss-initial的目的是什么前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目的是什么:

> 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,并且组件在用户网站中以相同的方式显示.

猜你在找的CSS相关文章