组件HTML必须自闭合、带命名空间前缀，根节点语义化且独立；类名强制BEM规范，禁止泛化名与内联样式；CSS变量统一管理，禁用px和!important；结构自觉保障长期可维护性。
组件HTML结构必须自闭合且带命名空间前缀
纯CSS组件没有JS运行时兜底，HTML结构一旦松散，样式就容易错位或失效。每个组件的根节点必须能独立存在、不依赖外部容器，比如 <button class="c-button">Submit</button> 是合法起点，而 <span class="c-button"> 套在 <div> 里再加一堆 wrapper 就违背了自闭合原则。
所有类名强制加统一前缀（如 c-、ui-），禁止出现 .header、.content 这类泛化名——它们在多个组件共存时必然冲突。BEM 中的 block 名就是这个前缀的载体，c-button 是 block，c-button__icon 是 element，c-button--primary 是 modifier。
- 根元素必须是语义化标签：
<button>用于按钮，<input type="checkbox">用于开关，不能全用<div> - 内部结构层级要扁平：允许
c-card__body，但禁止c-card__body__title__link；深层嵌套应拆成独立 block（如c-heading） - 避免“功能型包裹”：不要为控制 margin 写
<div class="c-button-wrapper">，而是让c-button自身支持c-button--spaced这类 modifier
HTML中禁用内联样式与 <style> 标签
哪怕只有一行 CSS，也必须抽离为外部文件并通过 <link rel="stylesheet"> 引入。内联样式（style="..."）和 <style> 标签会破坏缓存、阻塞渲染、干扰 DevTools 调试路径，而且构建工具无法压缩或按需加载它们。
更隐蔽的问题是：当你在 HTML 里写 <p style="color: var(--text-primary)">，这个 var() 实际不会生效——CSS 变量只在样式表中解析，不在内联属性里计算。
立即学习“前端免费学习笔记（深入）”；
-
<link>必须放在<head>内，路径拼写错误（如少个styles/）会导致样式完全不加载，且浏览器静默失败，无报错 - 首屏关键样式若真需内嵌，必须显式声明
media="screen and (min-width: 0px)"，否则仍被当作阻塞资源 - SVG 中的动态尺寸（如
<circle cx="50">）是唯一可接受的内联场景，但数值必须经校验，不可拼接用户输入
BEM 不是起名规则，而是结构约束协议
BEM 的本质不是让人多打几个下划线，而是用命名约定强制表达 DOM 边界：block 是自治单元，element 只能是它的直接子节点，modifier 只改变外观，不干预布局逻辑。一旦违反，样式就会随 HTML 结构变动而崩塌。
典型错误是把状态和定位混在一起，比如写 c-nav-item--left —— “left” 是布局职责，该由父容器（如 c-nav--horizontal）控制，而不是单个 item 决定。
-
c-form-field__input合法，c-form-field__input__error违规；后者应拆成c-form-field__error或独立 blockc-validation-message - 嵌套组件不拼接类名：card 里放 list，就用
<ul class="c-list">，而不是<ul class="c-card__list"> - modifier 只用于开关类状态：
c-button--disabled、c-modal--fullscreen，不用于响应式断点（那是媒体查询的事）
设计令牌必须统一定义在变量文件中
间距、颜色、圆角这些值不能硬编码在组件 CSS 里，必须全部抽到 variables.css 中，用 var(--c-space-md)、var(--c-color-text) 引用。改一处，所有组件自动同步，否则换肤、适配暗色模式时就得全局搜索替换。
禁止使用 px 单位——它无法响应缩放、无障碍字体设置，也不支持 CSS 变量链式计算。所有尺寸用 rem 或 em，配合 font-size 在 root 上调控。
- 变量命名要有上下文：
--c-space-xs比--space-4更易理解，--c-color-border-subtle比--border-color-2更具语义 - 禁止
!important：它会破坏变量继承链，让主题切换失效，且无法被 JS 动态修改 - 组件内不定义新变量，只消费已有变量；新增 token 必须走设计系统评审，而非开发者自行添加
