应采用类选择器统一定义公共样式，提取为语义化类名如.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); }`
改一处变量，所有引用它的地方自动更新，特别适合主题切换或多皮肤项目。
