分享JavaScript中直接调用CSS中的类名
分享JavaScript中直接调用CSS中的类名
在现代的 JavaScript 框架（如 React、Vue）中，使用 CSS 模块（CSS Modules）是一种非常流行的方式。.module.css 文件扩展名代表的是 CSS 模块，它与普通的 CSS 文件不同，能够解决样式全局污染的问题，并且实现更好的样式隔离。
为什么要使用 .module.css
- 作用域隔离：
- 传统的 CSS 文件中的类名是全局的，这意味着如果多个组件或页面使用相同的类名，它们会相互覆盖，从而导致样式冲突。
- 使用 CSS 模块时，每个类名都会被自动生成一个独一无二的名称，确保该样式只作用于当前组件，而不会影响其他组件的样式。
- 避免类名冲突：
- 使用 CSS 模块，框架会在编译时将你的类名转换为类似
ComponentName_classname_hash这样的格式。这样即使不同组件中有相同的类名，它们也不会相互影响。
- 使用 CSS 模块，框架会在编译时将你的类名转换为类似
- 更好的维护性：
- 由于样式作用域被限制到模块内部，这样可以更方便地管理和维护不同组件的样式，不用担心全局样式的覆盖问题。
.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 模块功能，从而实现样式隔离和避免冲突的功能。