最近写需求遇到如下代码，我们来分析一番：
.medicine-bot {:global(.cosd-site-vcard-card) {margin-top: -3px;}:global(.cosd-site-vcard-title-text) {font-size: var(--cos-text-headline-sm);}:global(.cosd-site-vcard-button) {background-color: #e8f3ff; // --cos-color-bg-primary-lightcolor: var(--cos-blue-0);}
}
这里的 :global 是 CSS Modules 的一种写法，表示在 CSS 模块化环境中，这段样式规则将被标记为全局作用域，而不是局部作用域。
CSS Modules 简介
CSS Modules 是一种 CSS 模块化方案，它默认将定义的样式作用域限制在当前模块中，以避免全局污染。这通常是通过给类名加上唯一标识符的方式实现的。例如：
css">.button {background-color: red;
}
在使用 CSS Modules 时，上述 .button 类名可能会被编译为类似于 .button__hash123 的格式，使其仅适用于当前组件。
:global 的作用
:global 的作用是声明一个样式是全局的，不受 CSS Modules 的作用域限制。例如：
css">:global(.cosd-site-vcard-button) {background-color: #e8f3ff;
}
这里的 .cosd-site-vcard-button 将被保留为原始类名（即不会被 CSS Modules 自动添加哈希前缀），并作用于整个应用中任何地方包含此类名的元素。
代码解读
在代码中，:global(.cosd-site-vcard-button) 表示：
- 定义了一个全局样式规则，针对类名
.cosd-site-vcard-button。 - 样式定义在
.medicine-bot内部，目的是可能与局部模块样式一起使用。
事实上，这段代码的目的是在覆盖第三方组件库的样式，添加 .medicine-bot ，相当于为:global(.cosd-site-vcard-button)加了一层作用域，防止污染全局样式
应用场景
这种写法通常用于以下场景：
-
需要覆盖第三方库样式：
如果.cosd-site-vcard-button是某个第三方库的类名，而无法更改 HTML 中的类名，使用:global可以直接定义全局样式。 -
明确全局样式需求：
当你希望某些样式明确是全局的而非局部时，可以使用:global。
注意事项
-
避免全局污染：
尽量少用:global，以保持样式的模块化。如果必须使用，确保命名具有特异性，避免意外覆盖其他样式。 -
全局样式替代方案：
如果要定义一组全局样式，可以使用普通 CSS 文件（不通过 CSS Modules 加载），以专门管理全局样式。
读到这，不禁会想：
- 这不就是vue的样式穿透嘛，在vue中我们为了更改组件库样式常常需要深度选择器
- 这跟
:global有什么区别呢？
Vue 样式穿透
在 Vue 中，由于 scoped 的作用，组件内的样式默认会局限于当前组件的范围。为了影响子组件或第三方库的样式，可以使用 >>> 或 /deep/（Vue 2.x）以及 ::v-deep（Vue 3.x）进行样式穿透。例如：
Vue 2.x 写法
<style scoped>
/deep/ .third-party-class {color: red;
}
或者：
<style scoped>
>>> .third-party-class {color: red;
}
Vue 3.x 写法
<style scoped>
::v-deep(.third-party-class) {color: red;
}
样式作用
这些穿透符号表示：尽管样式定义在当前组件内，但目标样式可以作用于子组件或 DOM 内的全局类。
CSS Modules 的 :global
在 CSS Modules 中，所有样式默认是局部的（scoped），和 Vue 的 scoped 类似。不过，:global 明确表示当前样式会被保留为全局作用域，例如：
css">:global(.third-party-class) {color: red;
}
这种写法可以在 CSS Modules 的上下文中影响整个应用中匹配的 DOM 元素。
两者的相似点
- 解决相同问题：两者都旨在解决样式作用域受限的问题，尤其是需要影响第三方库样式或者 DOM 外部的类时。
- 默认样式隔离：无论是 Vue 的
scoped还是 CSS Modules，样式默认都是局部的，需要明确指定全局或穿透行为。
两者的差异点
| 特性 | Vue 样式穿透 | CSS Modules 的 :global |
|---|---|---|
| 语法标记 | >>>, /deep/, ::v-deep | :global |
| 作用范围 | 影响子组件或 Shadow DOM | 整个 DOM |
| 使用上下文 | Vue 单文件组件 (SFC) | CSS Modules 环境 |
| 应用范围 | Vue 特有 | 各种 CSS Modules 框架 |
| 灵活性 | 可组合局部样式穿透 | 明确标记为全局 |
总结
Vue 的样式穿透（::v-deep 等）和 CSS Modules 的 :global 的确有类似的理念，但作用场景略有不同：
- 如果你在 Vue 中，使用
::v-deep是推荐的方式。 - 如果你在使用 CSS Modules，则通过
:global实现样式全局化是合理的做法。
两者都提供了一种受控的方式来覆盖作用域外的样式。
