分享JavaScript中直接调用CSS中的类名

分享JavaScript中直接调用CSS中的类名

在现代的 JavaScript 框架（如 React、Vue）中，使用 CSS 模块（CSS Modules）是一种非常流行的方式。.module.css 文件扩展名代表的是 CSS 模块，它与普通的 CSS 文件不同，能够解决样式全局污染的问题，并且实现更好的样式隔离。

为什么要使用 .module.css

1. 作用域隔离：
   • 传统的 CSS 文件中的类名是全局的，这意味着如果多个组件或页面使用相同的类名，它们会相互覆盖，从而导致样式冲突。
   • 使用 CSS 模块时，每个类名都会被自动生成一个独一无二的名称，确保该样式只作用于当前组件，而不会影响其他组件的样式。
2. 避免类名冲突：
   • 使用 CSS 模块，框架会在编译时将你的类名转换为类似 ComponentName_classname_hash 这样的格式。这样即使不同组件中有相同的类名，它们也不会相互影响。
3. 更好的维护性：
   • 由于样式作用域被限制到模块内部，这样可以更方便地管理和维护不同组件的样式，不用担心全局样式的覆盖问题。

.module.css 文件的使用示例

假设你有一个 CSS 文件 Button.module.css：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

然后在 JavaScript 或 React 组件中使用：

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

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

export default Button;

在上面的例子中，styles.button 实际上会被编译成一个唯一的、局部作用域的类名，比如 Button_button_1a2b3c。这样可以确保该样式只在当前组件中生效，避免类名冲突。

为什么 .module.css 必须带 .module

在大多数情况下，文件名中必须加上 .module 才能告诉编译器（例如 Webpack）这个文件应该按照 CSS 模块的方式进行处理。如果只是普通的 .css 文件，它将被视为全局的样式文件，不会应用 CSS 模块的作用域隔离机制。

总结

.module.css 是为了明确告诉编译器启用 CSS 模块功能，从而实现样式隔离和避免冲突的功能。