CSS Modules中的 :global

最近写需求遇到如下代码，我们来分析一番：

.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-light
        color: var(--cos-blue-0);
    }
} 

这里的 :global 是 CSS Modules 的一种写法，表示在 CSS 模块化环境中，这段样式规则将被标记为全局作用域，而不是局部作用域。

CSS Modules 简介

CSS Modules 是一种 CSS 模块化方案，它默认将定义的样式作用域限制在当前模块中，以避免全局污染。这通常是通过给类名加上唯一标识符的方式实现的。例如：

.button {
    background-color: red;
}

在使用 CSS Modules 时，上述 .button 类名可能会被编译为类似于 .button__hash123 的格式，使其仅适用于当前组件。

:global 的作用

:global 的作用是声明一个样式是全局的，不受 CSS Modules 的作用域限制。例如：

: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)加了一层作用域，防止污染全局样式

应用场景

这种写法通常用于以下场景：

1. 需要覆盖第三方库样式：
   如果 .cosd-site-vcard-button 是某个第三方库的类名，而无法更改 HTML 中的类名，使用 :global 可以直接定义全局样式。

2. 明确全局样式需求：
   当你希望某些样式明确是全局的而非局部时，可以使用 :global。

注意事项

1. 避免全局污染：
   尽量少用 :global，以保持样式的模块化。如果必须使用，确保命名具有特异性，避免意外覆盖其他样式。

2. 全局样式替代方案：
   如果要定义一组全局样式，可以使用普通 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 明确表示当前样式会被保留为全局作用域，例如：

:global(.third-party-class) {
    color: red;
}

这种写法可以在 CSS Modules 的上下文中影响整个应用中匹配的 DOM 元素。

两者的相似点

1. 解决相同问题：两者都旨在解决样式作用域受限的问题，尤其是需要影响第三方库样式或者 DOM 外部的类时。
2. 默认样式隔离：无论是 Vue 的 scoped 还是 CSS Modules，样式默认都是局部的，需要明确指定全局或穿透行为。

两者的差异点

总结

Vue 的样式穿透（::v-deep 等）和 CSS Modules 的 :global 的确有类似的理念，但作用场景略有不同：

• 如果你在 Vue 中，使用 ::v-deep 是推荐的方式。
• 如果你在使用 CSS Modules，则通过 :global 实现样式全局化是合理的做法。

两者都提供了一种受控的方式来覆盖作用域外的样式。