CSS Modules中的 :global

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

javascript 复制代码
.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);
    }
} 

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

应用场景

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

  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 写法

vue 复制代码
<style scoped>
/deep/ .third-party-class {
    color: red;
}

或者:

vue 复制代码
<style scoped>
>>> .third-party-class {
    color: red;
}

Vue 3.x 写法

vue 复制代码
<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 元素。


两者的相似点

  1. 解决相同问题:两者都旨在解决样式作用域受限的问题,尤其是需要影响第三方库样式或者 DOM 外部的类时。
  2. 默认样式隔离 :无论是 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 实现样式全局化是合理的做法。

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

相关推荐
谈不譚网安3 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板9 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩10 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真15 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅2 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss