22、前端开发中的PostCSS插件与自定义处理器

前端开发中的PostCSS插件与自定义处理器

1. Stylelint配置

Stylelint是一款强大且现代的CSS代码检查工具。其核心在于规则的定义，目前有100多个规则可供选择，可在 .styleintrc 文件、 package.json 文件或 stylelint.config.js 文件（导出JavaScript对象）中指定。

例如，在构建响应式网站时，如果大量使用黄金规则，可能希望将百分比值限制在三到四位小数。可以使用 number-max-precision 规则，示例代码如下：

.foo { top: 3.2456px; }
.foo { top: 3.245634px; }

指定 number-max-precision 规则为3时，上述代码会触发警告。但以下代码不会：

@media (min-width: 3.234em) {...}

建议阅读完整的规则列表，以便在生产环境中优化和检查代码。

2. 提供回退支持

在设计网页内容时，浏览器支持是一个关键问题。对于不兼容的旧浏览器，需要考虑提供支持或优雅降级。PostCSS生态系统中有许多插件可用于此目的，如Autoprefixer。

2.1 检测功能支持

可以使用CSS的