CSS Modules中与普通类名等效的:local伪类有什么使用价值？

安全阿岳

2026-9-30

为什么CSS Modules需要提供`:local`语法

:local和直接写类名等效的前提是CSS Modules默认开启了局部作用域模式，这种默认配置下大部分场景确实不需要显式写:local，但它存在的意义是覆盖以下特殊场景：

在全局作用域块中切回局部作用域
当你批量声明全局样式时，会用:global()包裹一整个块，此时块内的所有类默认都是全局生效的，如果要在这个块里单独声明某个局部类，就必须用:local显式标记：
```
:global {
  /* 全局样式，不会被CSS Modules编译重命名 */
  .ant-btn {
    border-radius: 2px;
  }
  /* 显式标记为局部样式，会被正常编译重命名 */
  :local(.custom-btn) {
    margin-left: 8px;
  }
}
```
适配自定义编译配置的项目
部分项目（尤其是老项目逐步迁移CSS Modules的场景）会修改编译配置，把CSS Modules的默认模式改成「全局作用域」：也就是默认所有类都不被重命名，只有显式加:local的类才会被当做局部样式编译。这种场景下:local是声明局部样式的唯一方式。
避免规则歧义，提升可读性
当样式文件里同时存在大量全局、局部样式混合的代码时，显式写:local可以让其他开发者一眼识别这是局部样式，不需要结合编译配置猜当前类的作用域；在使用composes等CSS Modules专有语法时，显式加:local也可以明确告诉编译器要引用的是当前文件的局部类，避免和同名全局类冲突。