不能用id做样式复用基类，因为id必须唯一，重复会导致getElementById失效、无障碍功能异常、CSS行为不可预测，且#id权重过高破坏样式可维护性；class才是专为复用设计的语义化基类。
为什么不能用 id 做样式复用基类
因为 id 在 HTML 中语义上必须唯一，浏览器和 CSS 引擎都按此假设工作。多个元素共用同一个 id，不仅会导致 document.getElementById() 只返回第一个匹配项，还会让无障碍工具报错、CSS 选择器行为不可预测（尤其搭配 :focus-within 或 label[for] 时）。
更实际的问题是：你写 #card { padding: 1rem; }，结果页面里有 5 个 id="card"，样式只对第一个生效，其余“看起来没样式”，但开发者很难第一时间意识到是 id 冲突——它不像 JS 报错那样明确。
-
class是专为复用设计的，可重复、可组合、可叠加 - 语义化类名如
card、btn、form-field才是真正可继承的基类起点 - 避免用标签名或层级做基类，比如
article h2—— 结构一变，样式就断
<template> 本身不提供样式基类，但它是结构复用的起点
<template> 标签只定义 DOM 片段，不解析、不渲染、不应用样式。它不自带 class 继承机制，也不会自动把父容器的 class 透传进去。所以你不能指望把 <template id="card"><div class="card">...</div></template> 一塞进去，样式就自动生效——前提是页面中已存在 .card 的 CSS 规则。
这意味着：模板复用 ≠ 样式复用。你得单独维护一套可复用的 CSS 类体系，并确保所有使用该模板的上下文都引入了对应样式文件（或 <style> 块）。
立即学习“前端免费学习笔记（深入）”；
- 推荐在模板内部用语义化 class，如
<div class="card"><h3 class="card-title"></h3></div> - 不要依赖外部作用域的 class 名，比如
<div class="container">—— 这个container可能根本没定义 - 若需隔离样式，得手动加
scoped策略（如 Shadow DOM），但原生<template>不支持
如何让模板里的 class 真正成为可继承的样式基类
核心是把 class 当作契约：模板声明“我需要 .card、.card-title 这些类存在”，而样式层负责兑现这个契约。不是模板驱动样式，而是样式驱动模板行为。
具体做法包括：
- 用 CSS 自定义属性统一控制基类变量，例如
--card-padding: 1rem;，然后在.card中用padding: var(--card-padding) - 用
@layer显式分层，把基类样式放在@layer base，组件变体放@layer components，避免权重冲突 - 禁止在模板 JS 中内联写
element.style.color = '#333'—— 这会覆盖所有 CSS 变量和媒体查询 - 如果模板要支持主题切换，确保所有颜色、间距都走
var(--color-primary)，而不是硬编码值
常见错误：以为把 HTML 塞进 <template> 就自动获得样式复用能力
典型现象是：本地开发看着正常，部署后部分卡片没边框、文字没行高、按钮没圆角。排查发现，是因为构建流程漏掉了某份 CSS 文件，或者 CDN 缓存了旧版样式表，而模板本身没有任何报错提示——它只是安静地渲染了一堆没样式的 div。
这暴露了一个关键事实：HTML 模板不校验样式是否存在。它只管结构，不管视觉。所以样式复用必须靠人工约定 + 工程约束（如 CI 检查 class 是否在 CSS 中定义）来兜底。
最容易被忽略的是：当多个团队共用同一套模板时，没人更新 .card-footer 的 CSS，但新业务又往模板里加了 <div class="card-footer"> —— 结果就是“写了等于没写”，连 debug 都难定位。
