页面复用性差源于样式与结构耦合过紧，应通过语义化原子类、CSS自定义属性、BEM式组合及文档化来提升通用性。
页面复用性差，本质是样式和结构耦合太紧——写一个按钮要复制一整套 margin、padding、border、color，换地方就得改一堆；写个卡片，每次都要重定义阴影、圆角、内边距。解决办法不是多写几个组件，而是从 class 设计源头建立通用性。
用语义化+原子化组合代替场景化命名
别再写 .user-card、.product-banner 这类强业务绑定的 class。它们一旦挪到新页面，往往得重写或加大量覆盖样式。换成基础能力型 class：
-
.p-4（统一内边距） -
.bg-white（标准白底） -
.shadow-sm（轻量阴影） -
.rounded-lg（中等圆角） -
.text-center（居中文本）
这些 class 不依赖上下文，哪里需要就加哪里，组合起来就能快速搭出一致的视觉块。比如一张卡片只需：<div class="p-4 bg-white shadow-sm rounded-lg">…</div>
提取高频视觉变量为 CSS 自定义属性
颜色、字号、间距、圆角这些值重复出现在多个 class 里，硬编码会让维护变困难。把它们抽成 :root 变量：
立即学习“前端免费学习笔记（深入）”；
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--color-primary: #3b82f6;
--radius-md: 8px;
}
然后在通用 class 中复用：
.p-4 { padding: var(--space-md); }
.rounded-md { border-radius: var(--radius-md); }
.text-primary { color: var(--color-primary); }
改主题、调间距时，只动变量，所有用到的地方自动同步。
用 BEM 思维约束嵌套，不靠 class 堆叠实现样式
通用 class 不等于无结构。遇到稍复杂模块（如带图标+文字的按钮），别靠 .btn .icon .text 多层 class 控制样式，而应设计可组合的 BEM 式基础块：
-
.btn：定义基础尺寸、行高、光标 -
.btn--primary：覆盖背景、文字色 -
.btn__icon：统一图标尺寸和对齐方式 -
.btn__label：控制文字样式与间距
这样既保持 class 的通用性，又避免“一个 class 写死全部样式”的僵化问题，也方便后续扩展变体（如 .btn--small、.btn--outline）。
给通用 class 加文档和示例页
再好的 class，没人知道怎么用就等于没做。建一个简单的 style-guide.html 页面，按功能分组展示：
- 间距类（
.m-2、.p-6…）配效果+数值说明 - 色彩类（
.text-gray-700、.bg-blue-50…）附色值和使用建议 - 响应式类（
.md:p-8、.lg:text-xl…）标清断点含义
新人打开页面一眼看懂能做什么、怎么组合，复用率自然上来。
不复杂但容易忽略：通用 class 不是越多越好，而是高频、稳定、正交。先从你项目里出现 5 次以上的样式模式开始抽象，每次加一个新 class 都问一句——它能不能在登录页、列表页、弹窗里都用上？答案是“能”，才加进去。
