如何压缩新嵌套语法CSS？2023年使用CSS嵌套是否可行？

一、如何压缩嵌套CSS代码 #

普通在线压缩工具大多不支持原生CSS嵌套语法，直接压缩会保留无效的嵌套结构，导致压缩失败或代码无效。正确的做法是先将嵌套语法编译为标准CSS，再进行压缩：

• 使用PostCSS工具链
  这是最通用的方案：

  1. 安装依赖：npm install postcss postcss-nested cssnano --save-dev
  2. 配置postcss.config.js：

  module.exports = {
    plugins: [
      require('postcss-nested'),
      require('cssnano')
    ]
  }
  

  3. 通过命令行或构建工具（Webpack/Vite）执行编译压缩，最终会得到标准且压缩后的CSS代码。

• 借助CSS预处理器
  Sass/Less等预处理器本身支持嵌套语法，你可以将原生嵌套代码稍作调整（注意&的使用差异），编译为标准CSS后再用压缩工具处理。

• 使用Tailwind CSS构建工具
  如果你项目中使用Tailwind，它的内置编译器支持原生CSS嵌套，打包时会自动完成编译与压缩。

编译后的标准CSS示例：

.nav-bar {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .nav-bar {
    display: flex;
  }
}
.nav-bar .container {
  display: flex;
}
.nav-bar .container::after,
.nav-bar .container::before {
  content: none;
}

压缩后最终代码：

.nav-bar{width:100%}@media screen and (min-width:768px){.nav-bar{display:flex}}.nav-bar .container{display:flex}.nav-bar .container::after,.nav-bar .container::before{content:none}

二、2023年使用原生CSS嵌套是否合理 #

从caniuse的75%支持率来看，原生CSS嵌套还未达到全浏览器覆盖，是否合理取决于你的用户群体：

• 适合场景：如果你的用户以现代浏览器使用者为主（比如面向开发者、年轻用户的产品），可以使用原生嵌套，但必须做好降级处理——通过PostCSS编译为标准CSS，避免不支持的浏览器出现样式失效。
• 不适合场景：如果需要兼容广泛用户（比如包含大量使用旧版浏览器的用户），建议直接用预处理器或PostCSS编译方案，不要直接交付原生嵌套代码。

你在调试器中看到的大量错误，本质是不支持原生嵌套的浏览器无法识别内部的嵌套规则，将其判定为无效CSS导致的。

三、解决调试器报错的核心方案 #

唯一可靠的解决方式是将原生嵌套CSS编译为标准CSS，这样所有浏览器都能正确解析代码，调试器也不会再抛出错误。渐进增强（如@supports检测）的方式局限性很大，无法覆盖所有不支持的场景，不推荐作为主要方案。

内容的提问来源于stack exchange，提问作者Guțu Andrei