纯html+css组件库必须带命名空间前缀，因无shadow dom时css泄漏是默认行为；需用.c-button等统一前缀避免类名冲突，禁用.header等泛化名，并确保结构自闭合、设计令牌统一用css变量而非px或!important。
为什么纯 HTML + CSS 组件库必须带命名空间前缀
没 Shadow DOM 时，CSS 泄漏是默认行为。不加前缀的 .button 或 .card 会和项目里任何同名类冲突，尤其当多个第三方模板混用时，样式覆盖顺序难追溯、调试像盲人摸象。
-
.c-button、.c-card__header这类带统一前缀的类名，是唯一能靠选择器本身锁定作用域的方式 - 禁用
.header、.content这种泛化名——它们语义模糊，且极易被全局 reset 或其他 CSS 规则意外影响 - 结构必须自闭合：复制一段
<div class="c-card">...</div>到任意空白 HTML 文件里，应该能独立渲染、样式不跑偏、不依赖外部 class
怎么用 <template></template> 安全加载 HTML 片段
<template></template> 不是“写完就能用”的组件容器，它只是浏览器跳过解析的占位符。直接 innerHTML 插入会丢表单状态、不执行脚本、相对路径失效。
- 必须用
document.importNode(tmpl.content, true)克隆，不是cloneNode(true)——前者保留<input checked>状态，后者不保 - 模板内禁止硬编码
id="card-1"，多次复用会导致 ID 重复，document.getElementById()只返回第一个 - 填充数据得手动遍历
querySelectorAll('[data-bind]')，比如data-bind="title"对应node.textContent = data.title -
<script></script>和<style></style>标签在<template></template>里默认不生效，需要 JS 手动创建并插入，否则逻辑断掉
为什么不能用 import './header.html' 直接加载
浏览器原生 import 只认 JS 模块，import './header.html' 会立刻抛出 TypeError: Failed to resolve module specifier。
- 构建时可用
import headerHtml from './header.html?raw'（Vite）或配置raw-loader（Webpack），但注意返回的是字符串，不是 DOM 节点 - 运行时用
fetch('./header.html')可行，但<img src="logo.png">的路径默认相对于当前页面 URL，不是 HTML 文件所在目录，容易 404 - 返回的 HTML 字符串中
<script></script>不会自动执行，得手动提取 script 标签内容并eval或createElement('script')插入 - 服务端渲染（如 Gin/Flask）中，CDN 地址必须写完整 HTTPS 链接，相对路径
./css/bootstrap.css在服务端环境下会拼错路由导致 404
设计令牌（Design Tokens）为什么不能用 px 和 !important
固定像素值和强制覆盖会让主题切换、高 DPR 屏适配、无障碍缩放全部失效，这不是“细节问题”，而是直接堵死后续所有定制可能。
- CSS 变量必须统一抽成
--c-space-md、--c-color-primary等，所有padding、margin、border-radius都基于变量计算 -
margin-left: 8px❌ —— 移动端双击放大后文字重叠，2x 屏幕下边框模糊；padding: var(--c-space-md)✅ —— 可被深色模式或品牌主题覆盖 -
!important是样式锁死开关，一旦用了，下游无法通过更具体选择器或变量覆盖，深色模式开关就形同虚设 - 字号推荐用
clamp(1rem, 4vw, 1.25rem)，响应式不依赖 JS，也不受用户系统字号设置干扰
data-component 标记作用域、<template></template> 隔离片段、构建工具约束路径——三者缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
