class专为复用设计，id语义唯一；应抽象语义化类名、用css自定义属性管理变量、@layer分层控制优先级、组合单一职责class实现模块化。
用 class 而不是 id 做样式复用的底层逻辑
HTML 中只有 class 是专为「可重复使用」设计的，id 语义上要求唯一，浏览器和 CSS 引擎都默认不支持多处复用。强行给多个元素加相同 id，不仅样式可能失效（尤其搭配 JS 查询时），还会导致无障碍访问工具报错。
实际写法中，把通用视觉特征抽象成语义化类名，比如：btn-primary、card-shadow、text-truncate。这些名字不绑定具体标签，也不依赖 DOM 层级，才能跨组件、跨页面稳定复用。
- 避免写
.header h2这类强层级选择器——一旦结构微调，样式就断 - 禁止用
style="color: #333"内联写法——无法被复用，也无法被 CSS 变量或媒体查询接管 - 别依赖标签名做样式，比如
button { padding: 8px 16px; }——后续换成<a role="button"></a>就失效
CSS 自定义属性（:root + var()）控制批量主题变量
真正实现“改一处、全盘变”的核心不是写更多 class，而是把可变值抽成 CSS 自定义属性。它们天然支持继承、可被 JS 动态修改、能配合 @media 切换暗色模式。
例如统一管理间距和颜色：
立即学习“前端免费学习笔记（深入）”；
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--color-brand: #007bff;
--color-text: #333;
}然后在任意 class 中复用：
.btn {
padding: var(--space-sm) var(--space-md);
color: var(--color-brand);
}
.card {
margin-bottom: var(--space-md);
}- 不要在每个 class 里重复写
16px或#007bff——维护成本指数上升 - 变量名用连字符分隔（
--text-color-primary），别用下划线或驼峰，否则部分旧版 Safari 不识别 - 变量可被 JS 修改：
document.documentElement.style.setProperty('--color-brand', '#e74c3c');
用 @layer 管理样式优先级，避免 !important 滥用
CSS 层叠规则本身不支持“模块覆盖”，结果就是团队协作时频繁加 !important，最后谁也搞不清哪个样式生效。CSS @layer 是现代解法，它让样式按声明顺序分层，而不是靠选择器权重硬拼。
典型分层结构：
@layer base, components, utilities;
<p>@layer base {</p><ul><li>{ box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
}</li></ul><p>@layer components {
.btn { padding: var(--space-sm) var(--space-md); }
}</p><p>@layer utilities {
.m-0 { margin: 0; }
.p-2 { padding: var(--space-sm); }
}-
@layer声明必须在任何样式规则之前，否则无效 - 同层内仍按源码顺序覆盖，但跨层时后声明的
@layer优先级更高（不用算权重） - 旧浏览器（如 IE、iOS 15.4 以下）不支持，需搭配 PostCSS 插件
postcss-layer回退
HTML 中如何安全地组合多个 class 实现模块化
一个按钮既要基础样式，又要尺寸变体，还要状态反馈，靠单个 class 写死会爆炸式增长（btn-primary-lg-hover、btn-secondary-sm-focus…）。正确做法是「职责分离 + 组合使用」。
示例结构：
<button class="btn btn-primary btn-lg is-loading">提交</button>
对应 CSS：
.btn { display: inline-flex; align-items: center; }
.btn-primary { background-color: var(--color-brand); }
.btn-lg { padding: var(--space-md) var(--space-lg); }
.is-loading::after { content: "…"; }- 每个 class 只干一件事：功能（
btn）、主题（btn-primary）、尺寸（btn-lg）、状态（is-loading） - 避免写
.btn-primary-lg这种耦合类——既不能单独用lg，也不能给btn-secondary加大尺寸 - JS 控制状态类时，用
el.classList.add('is-disabled')，别直接操作className字符串
最常被忽略的是 class 命名一致性：一旦定下 is- 表状态、js- 表 JS 钩子、u- 表工具类，就必须全项目统一。否则过三个月回头看，没人分得清 loading 和 is-loading 哪个该删。
