前端框架的CSS模块化（CSS Modules）

CSS模块化是一种将CSS样式按照特定规则划分到不同的模块中的方法，这样可以避免类名冲突，并使得样式更容易维护。在前端框架中，如React，可以通过CSS Modules来实现样式的模块化管理。

以下是一个React组件的例子，展示了如何在Create React App中使用CSS Modules：

// 导入CSS模块
import React from 'react';
import styles from './App.module.css';
 
// 使用CSS模块中定义的类名
const App = () => (
  <div className={styles.container}>
    <h1 className={styles.title}>Hello, CSS Modules!</h1>
  </div>
);
 
export default App;

对应的CSS文件 (App.module.css):

/* 定义一个CSS模块 */
.title {
  color: blue;
}
 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

在这个例子中，styles对象包含了CSS模块中所有定义的类名，并且在JSX中通过这个对象来引用相应的类名。当Webpack处理这种模块化的CSS时，它会自动为类名添加唯一的前缀，以避免在大型应用中的选择器冲突问题。