CSS类名越写越多反而更难维护，因未抽象可复用视觉模式而重复复制样式；应抽取高频、低语义、易组合的原子类（如u-mt-4、t-text-sm、c-bg-gray-100），按u-/t-/c-前缀分层，并以语义类为主干、工具类为补充来组织组件样式。
为什么 CSS 类名越写越多，反而改起来更费劲
因为没把可复用的视觉模式抽象出来，而是每次遇到相似效果就复制粘贴一段样式。比如 .btn-primary、.btn-small、.card-title、.card-desc 看似合理，但实际可能只是 font-size、padding、color 的不同组合，分散在十几个文件里，改一个间距就得全局搜三次。
哪些样式值得抽成公共类
不是所有样式都适合抽，重点盯住「高频出现 + 低语义 + 易组合」的原子级规则：
-
mt-4、px-6这类间距类（比写margin-top: 1rem更快，也更统一） -
text-center、flex、items-center这类布局/对齐类（避免重复写 display/flex-direction/justify-content） -
text-sm、font-bold、bg-gray-100这类基础视觉类（颜色、字号、字重、背景色） - 不抽：带业务语义的类，如
.user-avatar、.order-status-badge—— 它们该保留在组件内部，靠组合公共类实现
怎么组织这些公共样式才不乱
别新建一个 common.css 然后往里堆。按职责分层，用命名前缀隔离作用域：
.u-mt-2 { margin-top: 0.5rem; }
.u-px-4 { padding-left: 1rem; padding-right: 1rem; }
.u-flex { display: flex; }
.u-text-center { text-align: center; }
.t-text-sm { font-size: 0.875rem; }
.t-font-bold { font-weight: 700; }
.c-bg-blue-50 { background-color: #eff6ff; }
前缀含义：u- = utility（工具类），t- = typography（文本），c- = color（颜色）。这样即使全局搜索 mt，也不会误伤 .mt-card 这种业务类。
立即学习“前端免费学习笔记（深入）”；
抽完之后，组件里怎么用才不倒退
关键不是“少写样式”，而是“让样式组合更可控”。常见错误是把一堆 utility 类硬塞进 class 属性，导致 HTML 膨胀、难以维护：
<button class="u-flex u-items-center u-justify-center u-px-6 u-py-3 t-text-white t-font-semibold c-bg-blue-600 u-rounded u-shadow hover:c-bg-blue-700">提交</button>
正确做法是：保留语义类作为主干，utility 类只补足差异：
<button class="btn btn--primary">提交</button>
然后在 CSS 中定义：
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: 0.375rem;
transition: background-color 0.2s;
}
.btn--primary {
background-color: #3b82f6;
color: white;
}
.btn--primary:hover {
background-color: #2563eb;
}
这样既用了公共样式逻辑（比如 display、align-items），又没牺牲可读性；后续加个 btn--small，只需覆盖 padding 和 font-size，不用动 HTML。
真正容易被忽略的是：utility 类一旦泛滥，会模糊设计系统的边界。什么时候该用 u-py-2，什么时候该加 btn--sm？答案是看改动频率——如果某个 padding 在三个以上组件里被单独调整，它就不该是 utility，而该是组件变体。
