Frontend Academy · 课时

CSS Modules：作用域类名

在 Vite 或 webpack 项目中启用 CSS Modules，自动将类名限制在组件文件内，并消除全局样式泄漏。

CSS Modules：作用域类名 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 CSS 模块

CSS 模块会在构建时转换类名并加入唯一哈希，将类的作用域限制在组件文件内。名为 .card 的类会变成 .card_a1b2c3，因此不可能与其他组件的样式意外冲突。

CSS 模块的工作方式

将 CSS 文件作为对象导入。使用该对象的属性作为类名。打包工具（Vite、webpack）会处理转换过程。

// Button.module.css
.button {
  background: #6366f1;
  color: white;
  padding: 8px 16px;
}
.button--large {
  padding: 12px 24px;
}

// Button.tsx
import styles from './Button.module.css';

function Button({ large }: { large?: boolean }) {
  return (
    <button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
      Click me
    </button>
  );
}

使用 clsx 创建动态类名

clsx 库可以简化 CSS 模块中的条件类名组合。

import clsx from 'clsx';
import styles from './Button.module.css';

function Button({ variant, disabled }: ButtonProps) {
  return (
    <button className={clsx(
      styles.button,
      styles[`button--${variant}`],
      disabled && styles['button--disabled']
    )}>
      ...
    </button>
  );
}

CSS 模块中的全局 CSS

使用 :global 声明不应限制作用域的类。覆盖第三方库的类时非常有用。

/* Scoped: */
.container { padding: 16px; }

/* Global (not scoped): */
:global(.react-datepicker) {
  font-family: inherit;
}

组合——扩展类

CSS 模块支持使用 composes 从另一个类继承样式，也可以从其他模块继承。

/* utilities.module.css */
.flexRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Button.module.css */
.button {
  composes: flexRow from './utilities.module.css';
  background: #6366f1;
}

CSS 模块与局部样式（Vue）

Vue 的局部样式和 CSS 模块都能防止样式泄漏到全局，但实现方式不同：局部样式会添加数据属性；CSS 模块会转换类名。两者都很有效，CSS 模块也适用于 React。

Vite 中的 CSS 模块

对于以 .module.css 结尾的文件，Vite 开箱即支持 CSS 模块。无需额外配置。

CSS 模块中的 TypeScript

安装 typescript-plugin-css-modules，或使用 typed-css-modules 工具为 CSS 模块生成 .d.ts 文件，即可获得类名自动补全。

CSS 模块中的命名约定

由于类名会成为 JavaScript 属性，请在 CSS 模块中使用 camelCase 作为类名：使用 .buttonPrimary，而不是 .button-primary（连字符形式需要使用方括号访问）。

何时使用 CSS 模块

对于需要组件作用域样式、但不需要完整 CSS-in-JS 方案的 React 应用，CSS 模块非常适合。Vite + CSS 模块是一种轻量且零运行时开销的样式方案。

CSS 模块与 CSS-in-JS

CSS 模块：零运行时开销、使用普通 CSS、性能更好。CSS-in-JS（styled-components）：运行时生成动态样式、以 JS 为主。对于大多数应用，CSS 模块更简单也更快。

快速检查

使用 CSS 模块时，CSS 类名会发生什么变化？

回顾：CSS 模块

将 .module.css 文件作为对象导入。类名会自动添加唯一哈希以限制作用域。使用 :global() 表示有意声明全局样式。使用 composes 在模块之间继承样式。使用 clsx 创建条件类名。Vite 原生支持 CSS 模块。与 CSS-in-JS 相比，不产生运行时开销。

常见问题解答

「CSS Modules：作用域类名」课时是免费的吗？

是的 — 「CSS Modules：作用域类名」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「CSS Modules：作用域类名」这节课中我会学到什么？

在 Vite 或 webpack 项目中启用 CSS Modules，自动将类名限制在组件文件内，并消除全局样式泄漏。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「CSS Modules：作用域类名」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy