在项目开发中，我们经常会遇到需要在 JS 文件中使用 CSS 类名的情况，通常我们会使用字符串保存类名，这样容易出错且不容易维护。现在有一个 npm 包可以帮助我们更好地管理和使用 CSS 类名：css-module-class-lister。
什么是 CSS module？
在介绍这个 npm 包之前，先了解一下什么是 CSS module。
CSS module 是一种 CSS 样式文件的命名规则和使用方式，它规范了 CSS 类名的命名方式，并将类名的作用域限制在模块内部。
例如，这是一段简单的 CSS module 样式代码：
.button {
...
}在使用时，只需要将 CSS module 样式文件导入到 JS 文件中，然后通过类似如下代码的方式使用：
import styles from './button.module.css';
<button className={styles.button}>按钮</button>这样就可以避免在代码中出现重复的类名，并使得 CSS 类名的使用更加清晰和可维护。
css-module-class-lister 简介
css-module-class-lister 是一个可以帮助我们在 JS 中使用 CSS module 的 npm 包。它提供了两个 API：
getClassList(classNames: string, styles: object): stringfilterClassList(classNames: string, styles: object): string
其中，getClassList 可以将 CSS module 的类名转换为字符串，用于设置 HTML 元素的 className 属性；filterClassList 可以从类名列表中过滤掉不存在于 CSS module 中的类名。
getClassList 使用示例
假设我们有一个如下的 CSS module 样式文件：
.button {
color: white;
background-color: blue;
}
.bold-text {
font-weight: bold;
}我们可以在 JS 文件中使用 css-module-class-lister 进行如下操作：
import { getClassList } from 'css-module-class-lister';
import styles from './styles.module.css';
const classNames = 'button bold-text';
const classList = getClassList(classNames, styles);其中，classNames 是一个字符串，包含了要使用的 CSS 类名，通过空格分隔；styles 是导入的 CSS module 样式文件。
getClassList 返回一个字符串，其中包含了转换后的有效类名，可以直接赋值给 HTML 元素的 className 属性。
例如，上述代码执行完成后，classList 的值为：
"styles_button__2lXiV styles_bold-text__2QJ2F"
我们可以将这个字符串作为 HTML 元素的 className 属性进行赋值：
-- -------------------- ---- -------
------ ----- ---- --------
-------- -------- -
----- ---------- - ------- -----------
----- --------- - ------------------------ --------
------ -
------- ----------------------
--
---------
--
-
------ ------- -------这样就可以在 React 中使用 CSS module，并实现类名的自动管理。
filterClassList 使用示例
假设我们有一个 CSS module 样式文件：
.button {
color: white;
background-color: blue;
}通过 css-module-class-lister，我们可以将类名转换为对应的 CSS module 类名：
-- -------------------- ---- ------- ------ - ------------- --------------- - ---- -------------------------- ------ ------ ---- ---------------------- ----- ---------- - ------- ----------- ----- --------- - ------------------------ -------- ----------------------- -- --------------------- ------------------------ ----- ----------------- - --------------------------- -------- ------------------------------- -- ----------------------
其中，filterClassList 会将类名列表中不存在于 CSS module 中的类名过滤掉，仅保留存在的类名，上述代码执行完成后，filteredClassList 的值仅包含 button，bold-text 被过滤掉了。
这样可以避免在代码中使用错误的类名，同时保证代码更加规范和清晰。
总结
通过 css-module-class-lister，我们可以更加方便地在 JS 中使用 CSS module，并避免在代码中出现重复和错误的类名。在前端项目中，这个 npm 包具有一定的实用性和指导意义，建议大家在开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66b5b