class是HTML中唯一为样式复用设计的全局属性，支持多元素共用、单元素多类组合及classList安全操作；须语义化命名、避免层级依赖、分离维度规则，并配合作用域隔离机制防止冲突。
class 是 HTML 中唯一被设计用来复用样式的全局属性，它天然支持多元素共用、单元素多类组合、JavaScript 动态操作；但直接复用 class 不等于自动隔离或安全共享——冲突和穿透恰恰发生在你没约束作用域的时候。
class 复用的正确写法：语义化 + 组合 + 无结构依赖
复用 class 的核心不是“多写几个 class=xxx”，而是让每个 class 具备稳定语义、不绑定 DOM 层级、可自由组合。
- 写
class="btn btn-primary btn-small"，而不是class="header-button"或class="modal-submit-btn"——后者绑定具体位置或用途，一挪就失效 - 避免层级选择器：
.card .title会因父容器变化而断链；改用.card-title这类独立语义类 - 一个 class 只负责一个维度：尺寸、颜色、状态、变体分开定义，比如
btn（基础）、btn-primary（主题）、btn-disabled（状态） - 用
classListAPI 操作，而非字符串拼接：el.classList.add('active')比el.className += ' active'更安全，不会重复或覆盖
为什么 class 复用常导致样式冲突？
冲突不是 class 本身的问题，而是 class 规则未限定作用域，或被外部更高优先级规则覆盖。
- 第三方 reset 库（如
normalize.css）里写了button { margin: 0 }，你的.btn就会被穿透影响 - 两个子应用都定义了
.modal，后加载的 CSS 覆盖前者的样式，遮罩层错位或消失 - 父应用写了
body * { font-size: 14px }，子应用的.card-title即使设了20px也会被重置 - UI 库（如 Ant Design）的
.ant-btn是全局生效的，你加个class="ant-btn"就等于主动引入污染
微前端中 class 如何兼顾复用与隔离？
靠 class 单独做不到隔离，必须配合构建时前缀或运行时注入机制，否则所有 “复用” 都是裸奔。
立即学习“前端免费学习笔记（深入）”；
- qiankun 开启
strictStyleIsolation: true后，会把.btn自动重写为[data-qiankun="sub-app-a"] .btn，但前提是子应用不能手动写带 data- 前缀的选择器，否则规则叠加混乱 - MicroApp 的
<micro-app name="xxx">标签等价于自动包裹一层micro-app[name="xxx"]选择器，你的.btn必须写成micro-app[name="xxx"] .btn才生效 - PostCSS 插件（如
postcss-css-namespace）可统一给所有 class 加前缀，但要求所有子应用共用同一套配置，否则 A 应用编译出.a-btn，B 应用仍用.btn，照样冲突 - 真正硬隔离要靠 Shadow DOM：
this.attachShadow({ mode: 'closed' })后，外部.btn规则完全失效，但代价是内联<style>会逃逸，必须用adoptedStyleSheets注入
跨团队共享组件库时 class 怎么用才不翻车？
纯 HTML 分发场景下，class 名前缀极易被覆盖或遗漏，此时 data 属性才是更可靠的样式锚点。
- 强制所有组件根元素带
data-comp="button"，CSS 写成[data-comp="button"] { ... }，不依赖 class 名是否存在 - 禁止混用：
.c-button[data-comp="button"]等于同时维护两套标识，一旦 class 被删或 data 属性漏写，样式立刻失效 - 变体统一用 data 扩展：
data-comp-size="large"对应[data-comp-size="large"]，比.btn-large更可控 - 禁用泛化标签：
<header>改为<div data-comp="header">，否则宿主页面的header { margin-top: 2rem }会意外生效
最易被忽略的一点：class 复用的前提不是“怎么写”，而是“谁来管”。如果多个团队各自维护一套 .btn，哪怕命名一致、样式相同，只要加载顺序或 scope 不受控，复用就只是幻觉。
