<p>判断是否该拆Block或精简Element，只看一个事实：该UI片段下次出现在另一页面时，是否愿意直接复制粘贴HTML和class；若在用户列表、弹窗、侧边栏均出现，则必须提为独立Block（如status-badge），而非user-cardstatus；若仅存在于父容器内且无自身状态或交互逻辑，可精简但不可牺牲语义（cardavatar✅，cardavt❌）；出现三层下划线（如headernavitem）即结构错误；修饰符须为布尔型或有限枚举型（button--disabled✅，button--on-dashboard-page❌）；多子元素共用状态应提升至父Block（dashboard--is-loading）；禁用描述性短语（button--very-big-and-centered❌），改用button--size-lg✅；用data-属性+CSS自定义属性接管可变部分；注释分区（/ BLOCK: card /等）比缩写更有效；SCSS中禁用&title嵌套，所有类名须显式书写；每次写新类名前必问：“它是否具备自身状态、行为或复用场景？”</p>
类名过长不是命名规则的问题，是组件边界没划清、修饰符失控、结构语义被滥用的结果。硬缩写（如uc-avt--l）只会让调试和协作更痛苦。
怎么判断该拆 Block 还是精简 Element
只看一个事实：这个 UI 片段下次出现在另一个页面时，你愿不愿意直接复制粘贴这段 HTML 和 class？
- 如果它在用户列表、弹窗、侧边栏都出现过 → 必须提为独立
Block（如status-badge），而不是user-card__status - 如果它只存在于父容器内，且无自身状态或交互逻辑 → 可精简命名，但不能牺牲语义（
card__avatar✅，card__avt❌） - 一旦出现三层下划线（如
header__nav__item或card__body__list__item），说明结构已错：中间层（nav、list）本该是 Block
Modifier 堆叠失控的实操拦截点
button--theme-primary--size-xl--variant-outline 这类类名本质是把配置塞进 HTML，后期改一个值就得全局搜索替换。
- 只保留布尔型或有限枚举型修饰符：
button--disabled✅，button--on-dashboard-page❌ - 多个子元素共用同一状态时，提升到父 Block：
dashboard--is-loading，再用 CSS 批量控制.dashboard--is-loading .button - 禁用描述性短语：
button--very-big-and-centered❌，改用button--size-lg✅ - 用
data-属性 + CSS 自定义属性接管可变部分：<button data-size="lg" data-variant="outline">，配合 JS 设置style="--btn-size: lg"
为什么注释分区比缩写更有效
HTML 类名长度本身不卡人，真正卡住的是类名堆砌后失去结构感——.card、.card__header、.card__title--highlighted 全挤在一起，编辑器没法折叠，Ctrl+F 也找不到重点。
立即学习“前端免费学习笔记（深入）”；
- 必须用注释显式划分：
/* ========================================================================== BLOCK: card ========================================================================== */、/* ========================================================================== ELEMENTS ========================================================================== */、/* ========================================================================== MODIFIERS ========================================================================== */ - 每个区块之间空一行，形成视觉呼吸感
- SCSS 中禁用
&__title { }这类嵌套生成——它掩盖 BEM 结构，让注释分区失效；所有类名必须显式书写（.card__title） - 配置编辑器按注释折叠代码（如 VS Code 的
"editor.foldingStrategy": "indentation"配合注释关键词）
最常被忽略的一点：每次写新类名前，没问过“它是否具备自身状态、行为或复用场景”。这个问题的答案，比任何命名技巧都决定类名最终会不会失控。
