css 基础

CSS Modules

  1. CSS Modules 让每个组件的样式只作用于自己，不会污染全局，也不会被全局污染,让 CSS “局部作用域化(Scoped CSS)”.
  2. 常用于 React 生态（React、Next.js、Vite）

使用示例

目录结构
Card.module.css
Card.jsx
App.jsx
补充说明
/src
  /components
    /Card
      Card.jsx
      Card.module.css
  App.jsx

/* Card.module.css */

.card {
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  color: #555;
}

// Card.jsx
import styles from './Card.module.css'

export default function Card({ title, children }) {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
      <p className={styles.content}>{children}</p>
    </div>
  )
}

import Card from './components/Card/Card'

export default function App() {
  return (
    <div style={{ padding: 40 }}>
      <Card title="CSS Modules 示例">
        这是一个使用 CSS Modules 的组件。
      </Card>
    </div>
  )
}

构建后变成：
<div class="card__a1b2c">
  <h2 class="title__d3e4f">...</h2>
</div>
类名自动哈希化，避免冲突。

网站链接

  1. css的MDN网站: MDN网站
  2. css测试网站：css测试网站