是什么

CSS Modules 是一种 CSS 的模块化解决方案，它的核心思想是将 CSS 文件模块化，使得每个 CSS 文件内的选择器都有各自的作用域这样做的好处是可以避免全局作用域下的样式冲突，提高样式代码的可维护性。CSS Modules 并不是一个官方标准，也不是浏览器的特性，而是在构建步骤（例如使用 Webpack 或 Browserify）中对 CSS 类名和选择器限定作用域的一种方式

在使用 CSS Modules 时，我们需要把所有的标签写到 JS 文件里。例如：

import styles from "./styles.css";
element.innerHTML = `<h1 class="${styles.title}">An example heading</h1>`;

在这个例子中，你可以通过 styles.title 的方式访问 CSS 文件中的 .title 类。然后在构建过程中，构建工具会搜索我们用 import 语句载入的名为 styles.css 的文件，之后把源文件解析成新的 HTML 和 CSS 文件，类名会被特定的格式替换。

CSS Modules 还提供了 composes 关键词属性，可以实现类似 Sass 中 @extend 的功能

总的来说，通过使用 CSS Modules，我们可以保证单个组件的所有样式集中在同一个地方且只应用于该组件这样可以解决 CSS 全局作用域的问题，提高代码的可读性和可维护性。