css modules中:local()通常冗余，因默认局部作用域；:global()须包裹完整选择器片段，否则类名错位失效，且需全量包裹第三方类，避免粒度过大导致样式污染。
为什么 :local() 通常不用显式写
CSS Modules 默认所有类名都走局部作用域，:local(.button) 和直接写 .button 编译结果完全一致。显式写 :local() 只在两种场景有用：一是和 :global() 混用时做语义强调；二是需要对某段选择器强制声明局部性（比如防止被父级 :global() 意外影响）。但多数时候纯属冗余，反而增加维护成本。
:global() 必须包裹完整选择器片段
常见错误是把伪类、子选择器或组合符拆出来——:global(.btn):hover 或 .modal :global(.close) 都不能按预期工作。浏览器解析时会把未包裹部分仍当作局部类处理，导致编译后类名错位，样式不生效。
-
:global(.btn:hover)✅ 整个选择器透出，匹配真实 DOM 中的.btn:hover -
:global(.modal .close)✅ 整个后代选择器原样输出 -
:global(.modal) .close❌.close仍被哈希化，除非也加:global() -
@media (min-width: 768px) { :global(.card) { ... } }✅ 允许，@media不限制:global() -
@keyframes slideIn { :global(.step) { opacity: 0; } }❌ 语法错误，@keyframes内部不允许:global()
混用时最容易漏掉的边界问题
当写 .wrapper :global(.third-party-btn)，它只表示“在 .wrapper 局部作用域内找一个带 .third-party-btn 类的子元素”。但如果第三方库的样式没提前加载，或者你忘了用 :global() 包裹整个选择器链（比如 :global(.ant-modal .ant-btn-primary)），就可能因加载顺序或哈希干扰而失效。
- 第三方类必须全量包裹：
:global(.ant-btn), :global(.ant-btn-primary)，不能只包一部分 - 全局规则若涉及 DOM 根节点（如
:global(body)），多个组件同时定义会导致不可控覆盖 -
:global()不提供嵌套保护，:global(.a) .b中的.b仍受当前模块作用域约束
真正该警惕的不是语法，而是作用域“泄漏点”
:global() 本身不污染全局，但它的实际影响取决于你包裹的选择器粒度。写 :global(.highlight) 是安全的；写 :global(*) 或 :global([class*="btn"]) 就等于主动放弃隔离。更隐蔽的问题是：你以为自己只改了一个按钮，结果因为 :global(.btn) 匹配了所有框架按钮，连管理后台的 Ant Design 表单按钮也变了圆角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
