必须用 data 属性（如 data-comp="button"）实现跨团队 html 组件样式隔离，因类名前缀在纯 html 场景下易被覆盖或遗漏，而 data 属性不依赖构建、无命名冲突、原生支持且可精准作用域控制。
跨团队共享的 HTML 组件库，必须用属性前缀（如 data-comp-button）替代类名隔离，否则样式必然冲突——类名哈希、scoped、BEM 都依赖构建时控制权，而纯 HTML 分发场景下你无法保证对方构建流程一致。
为什么不能只靠 class 名加前缀
类名前缀（如 .c-button）在纯 HTML 场景下看似合理，但实际落地会立刻失效：
- 第三方团队可能直接复制 HTML 片段，却漏掉配套 CSS 文件，或误将
.c-button覆盖为全局.button - 若对方项目已存在
.c-button，你的样式仍会被覆盖（CSS 优先级相同，后加载者胜出） - 无法阻止外部用标签选择器（如
button { padding: 0 }）或通配符（* { box-sizing: border-box }）穿透影响
必须用 data 属性实现运行时样式绑定
data 属性是唯一不依赖构建、不污染 class 命名空间、且浏览器原生支持的选择器锚点。它把样式控制权从“类名约定”转移到“属性存在性”上，天然规避命名冲突。
- 所有组件根元素必须带唯一
data-comp属性，如data-comp="button"、data-comp="card" - CSS 规则全部基于该属性书写：
[data-comp="button"] { display: inline-flex; }，[data-comp="button"] span { font-weight: 600; } - 禁止混用 class 和 data 属性做样式判断，例如
.c-button[data-comp="button"]—— 这等于同时维护两套标识，增加失效风险 - 若需变体（如 size、theme），统一用
data-comp-xxx扩展：data-comp-size="large"、data-comp-theme="dark"，对应写[data-comp-size="large"]
HTML 结构必须自闭合且禁用泛化语义标签
组件 HTML 片段被复制粘贴到任意页面时，不能假设父级环境可控。结构松散会放大属性选择器的副作用。
- 禁止直接使用
<header></header>、<footer></footer>、<main></main>等全局语义标签作为组件容器；改用<div data-comp="header"> —— 否则外部 <code>header { margin-top: 2rem }会意外生效 - 所有嵌套子元素也必须带
data-comp或明确作用域属性，如<div data-comp-part="title">，避免 <code>[data-comp="card"] h2被宿主页面的h2全局规则干扰 - 禁用
<style></style>标签内联样式，所有 CSS 必须外置为独立文件，通过<link rel="stylesheet">加载 —— 否则缓存失效、无法压缩、调试混乱 - 不要
@import "bootstrap.css"，而是提取你需要的按钮、栅格、表单规则，重写为[data-comp="button"]、[data-comp="grid"]作用域 - 字体、颜色、间距等设计令牌必须转为 CSS 自定义属性，并限定作用域：
[data-comp] { --c-spacing-xs: 4px; --c-color-primary: #007bff; } - 若必须复用第三方图标字体（如 Font Awesome），禁止用
<i class="fa fa-check"></i>，改用<span data-comp-icon="check"></span>+ 对应伪元素规则
第三方 CSS 框架必须重写为 data 属性驱动
直接引入 Bootstrap 或 Foundation 的 CSS 文件，等于主动放弃隔离。它们的全局重置、通用选择器、无前缀类名会立刻污染宿主环境。
真正难的不是写对第一个组件，而是确保第十个团队接入时不改一行代码就能跑通。data 属性隔离不依赖构建链、不依赖框架、不依赖开发者自觉，它把“能否共存”这个问题，从协作问题变成了语法问题 —— 只要属性名不重复，样式就不可能泄漏。
