前阵子我看文章时看到一篇文章讨论 CSS 预处理器的替代方案。其中就是否用使用 CSS 嵌套语法在评论区产生了争论。有人说
兼容程度不太行
有人评论
我不管这么多，我现在就掏出 Android6 和 iOS11 试试看你行不行 [发怒]
甚至有人评论
《IE6 强势归来》
这里我说说我的看法供参考。
我认为架构层应当为业务开发提供构建配置，嵌套语法可以在构建后生成低浏览器版本也可用的代码。业务层只管用就行了。
新特性的使用是无法阻挡的趋势
业务开发人员在开发时，不会给你考虑这是新特性还是还是旧特性，他们的开发步骤就是百度、Ctrl+C、Ctrl+V。于是，新特性就会不可避免地到项目中来。因此我们在前端基建中，为尽可能多的新特性给出处理方案，业务人员才能无压力地编写代码。
PostCSS 插件选用
CSS 嵌套有 2 个 PostCSS 插件可用，一个是 postcss-nested、一个是 postcss-nesting。postcss-nested 插件则模仿 Sass 的工作方式的一个插件，postcss-nesting 插件遵循 CSS Nesting Module 标准的插件。因此我们应当使用 postcss-nesting 这个插件。这两种具体差别是 Sass 嵌套可以使用 & 拼接类、以及 @at-root 语法。
我们搭建一个工程化项目来开看看构建效果
我们可以看到，即使是古老的 IE6 也能使用。
开发规范
如果我们在做前端基建时，如果由于各种原因，没法使用 PostCSS 转化嵌套，我们就需要立下规矩，在开发规范上禁止使用嵌套语法。我们可以 stylelint 中的 max-nesting-depth 规则设置为 1 可以禁止使用嵌套语法。
其他 CSS 新特性处理
其他 CSS 新特性也可以使用这样的思路处理，先使用 PostCSS，不行就用 stylelint。我这里为大家整理了一个 Excel，把常用的特性以及对应的 PostCSS 插件和 stylelint 规则都列出来了。大家可以自行处理构建方案。
