应采用类选择器统一定义公共样式，提取为语义化类名如.text-primary、.btn-sm；支持多类组合使用；遵循BEM命名规范避免冲突；通过CSS自定义属性管理可复用值以提升可维护性与主题切换能力。

用类选择器统一定义样式，避免重复写相同的CSS规则。

提取公共样式为独立类

把多个元素共有的样式（比如文字颜色、字体大小、内边距等）抽出来，定义成一个或多个语义清晰的类名。例如：

• `.text-primary` → `color: #007bff;`
• `.btn-sm` → `padding: 4px 12px; font-size: 14px;`
• `.card-shadow` → `box-shadow: 0 2px 8px rgba(0,0,0,0.1);`

需要这些效果的元素直接复用类名，不用重复写样式。

组合使用多个类实现灵活控制

一个元素可以同时拥有多个类，各司其职。比如按钮既需要基础样式，又需要尺寸和主题：

• `确定`
• `.btn` 定义通用按钮结构（display、border、cursor等）
• `.btn-sm` 控制尺寸
• `.btn-primary` 控制颜色和背景

这样比为每个按钮单独写一套样式更易维护、更易扩展。

借助BEM命名规范减少样式冲突

当多个模块存在相似结构时，用 BEM（Block__Element--Modifier）方式命名类名，让类名自带上下文：

• `.header`（块）
• `.header__title`（元素）
• `.header--dark`（修饰符）

避免 `.title` 这种泛化命名导致意外覆盖，也方便团队协作时快速理解样式作用范围。

必要时用 CSS 自定义属性（变量）管理可复用值

颜色、间距、圆角等常量值，适合用 :root 中的 CSS 变量统一管理：

• `:root { --color-brand: #007bff; --space-md: 16px; }`
• `.btn { padding: var(--space-md) calc(var(--space-md) * 2); }`
• `.text-brand { color: var(--color-brand); }`

改一处变量，所有引用它的地方自动更新，特别适合主题切换或多皮肤项目。