CSS-Modules

1. CSS Modules 概述

CSS Modules 自动为每个类名生成唯一哈希，实现样式隔离，避免命名冲突。

/* Button.module.css */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
}
.primary {
  background: blue;
  color: white;
}

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

function Button() {
  return <button className={`${styles.btn} ${styles.primary}`}>Click</button>;
}
// 渲染为：<button class="Button_btn_x9y8z Button_primary_a1b2c">Click</button>

2. 命名约定

/* 推荐：camelCase */
.primaryButton {
}

/* 也可以：kebab-case */
.primary-button {
}

// camelCase 引用
styles.primaryButton;

// kebab-case 引用
styles['primary-button'];

3. 组合（composes）

.base {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

.primary {
  composes: base;
  background: blue;
  color: white;
}

4. 与框架集成

React

import styles from './Component.module.css';
<div className={styles.container}></div>;

Vue

<style module>
  .container {
    padding: 1rem;
  }
</style>

<template>
  <div :class="$style.container"></div>
</template>

5. TypeScript 支持

// declare module '*.module.css' {
//   const classes: { readonly [key: string]: string };
//   export default classes;
// }

6. 对比其他方案