使用 PostCSS 自动重置 CSS 重置答案

【问题标题】：CSS Reset with PostCSS autoreset使用 PostCSS 自动重置 CSS 重置
【发布时间】：2017-04-26 21:59:32
【问题描述】：

我正在使用带有 postCSS 的 create-react-app 初始存储库并为每个组件导入 .css 文件的项目中试用 postCSS。也就是说，每个组件都包含一个import 'styles/componentA.css';，或多个。

为了在浏览器中创建一致的样式，我想导入一个 CSS 重置。我尝试了一些方法：

导入包含基于 Eric Meyer 重置的标准 CSS 重置的 .css 文件。
为 postCSS 使用 autoreset 插件。

对于第一个选项，在dev 模式下，CSS imports 作为<style> 标签添加到文档中。 CSS Reset 出现在<style> 标签列表的最后，尽管它是在顶级组件中导入的。理想情况下，首先导入 CSS 重置。排在最后意味着它将覆盖我应用于基本元素的任何样式（如h1 {font-size: 40px;}）

对于第二个选项（使用自动重置），似乎没有办法将特定规则应用于特定元素。例如，我只想将list-style: none 应用于ul 和ol 元素。

是否可以使用 autoreset 插件在 postCSS 中进行类似 Eric Meyer 的 CSS 重置？还是我走错了方向并误解了它的目的？

【问题讨论】：

标签： reactjs webpack postcss create-react-app

【解决方案1】：

我不使用 react，但在使用组件和重置 PostCSS 时遇到了类似的问题（我正在构建这里描述的东西：http://ecss.io/chapter7.html）。我不想为每个组件加载一个重置，而只是像传统上那样使用一个全局重置。

因此，我选择了一个纯粹用于“globalCSS”的“组件”。这是第一个在重置时加载和加载的组件（以及全局 PostCSS 变量和 mixins），因此后续组件无需重新声明即可访问它们。

这是您可以使用/适应的方法吗？

【讨论】：

当我深入研究它时，我意识到组件不需要 CSS 重置。组件应该能够独立存在，不受外部组件的影响（或尽可能少地）。使用这种方法，应该基于组件进行重置，并且组件的所有样式都本地化到特定组件。