应使用 class 而非 id 控制样式复用，因 id 必须唯一，多处使用会导致 JS 查询失效、无障碍报错；需抽象共性为语义化 class（如 card、btn），避免强层级、内联样式、标签名依赖，并通过 CSS 自定义属性统一可变值，用 @layer 管理层叠顺序，最后通过模板或构建工具统一引入 CSS 文件确保加载一致。
用 class 而不是 id 控制样式复用
id 在 HTML 和 CSS 中语义上必须唯一，浏览器不保证多处使用同一 id 时样式能一致生效；更关键的是，JS 查询（如 document.getElementById）会只返回第一个匹配元素，导致逻辑错乱。无障碍工具也会报错。
实际操作中，把视觉/功能共性抽象成 class 名，比如：card、btn、text-truncate。这些名字不绑定 <div> 或 <button> 标签，也不依赖父级结构，才能跨页面、跨组件稳定复用。
- 避免写
.header h2这类强层级选择器——DOM 稍微挪个位置，样式就挂了 - 禁止用
style="color: #333"内联写法——它无法被媒体查询接管，也不能被 JS 动态切换 - 别依赖标签名写样式，比如
button { padding: 8px 16px; }——换成<a class="btn">就立刻失效
抽离可变值为 CSS 自定义属性
真正决定复用效率的，不是 class 数量，而是是否把重复出现的数值（颜色、间距、圆角）统一管理。硬编码 16px 或 #007bff 在多个地方，改一次就得全局搜替换，极易遗漏。
在 :root 中定义变量，用 var(--space-md) 替代具体数值：
立即学习“前端免费学习笔记（深入）”；
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--color-brand: #007bff;
--color-text: #333;
}
<p>.btn {
padding: var(--space-sm) var(--space-md);
color: var(--color-brand);
}</p><p>.card {
margin-bottom: var(--space-md);
}- 变量名必须用连字符（
--text-color-primary），下划线或驼峰在旧版 Safari 中可能不识别 - JS 可随时修改：
document.documentElement.style.setProperty('--color-brand', '#e74c3c') - 配合
@media (prefers-color-scheme: dark)切换暗色模式变量，无需重写整套 class
用 @layer 解决样式覆盖混乱问题
团队协作中频繁加 !important，本质是层叠顺序失控。CSS @layer 让你可以显式声明优先级，而不是靠选择器权重“猜拳”。
典型分层方式：
@layer reset {
* { margin: 0; padding: 0; }
}
@layer base {
.btn { border-radius: 8px; }
}
@layer components {
.btn-primary { background: var(--color-brand); }
}- 层内样式按书写顺序覆盖，层间按
@layer声明顺序决定优先级 - 避免在
@layer components里再写!important——它会被同层后写的规则自然覆盖 - 构建工具（如 PostCSS）支持自动注入 layer，但需确认目标浏览器兼容性（Chrome 102+、Firefox 101+）
模板级统一引入 + 构建阶段注入
样式复用不只是写法问题，更是工程组织问题。如果每个 HTML 文件都手动写 <link rel="stylesheet" href="...">，路径出错、版本不一致、缓存失效都会发生。
推荐两种落地方式：
- 用模板引擎（如 EJS、Pug）在布局文件中集中引入：
<link rel="stylesheet" href="/css/base.css">，子页面自动继承，改一处全更新 - 用 Webpack/Vite 的插件（如
html-webpack-plugin）在构建时自动注入带哈希的 CSS 链接，避免手写路径错误，也解决缓存问题 - 静态站点可借助 SSI（
<!--#include file="head.html"-->）复用公共头片段，但需服务端开启支持
最易被忽略的一点：即使用了自定义属性和 @layer，如果 CSS 文件没被统一加载，或者加载顺序错乱，所有设计都会失效。样式复用的终点不在 CSS 里，而在 HTML 的引用链路上。
