vs code中需安装postcss language support插件并配置@bem注释模板，配合auto rename tag实现bem类名自动补全；禁用emmet等智能缩写插件，避免生成无效类名，确保编辑体验匹配bem规范。
直接在 HTML 编辑器里硬敲 card__header、button--disabled 这类长名，90% 的人会在第三行就放弃——不是规范难，是编辑体验没跟上。BEM 落地失败，八成卡在编辑器这关。
怎么让编辑器自动补全 BEM 类名，而不是靠记忆或复制粘贴
手写 modal__content__wrapper--scrollable 不仅易错，还暴露一个根本问题：你正在把结构假设（content 下一定有 wrapper）写进类名，这已经违反 BEM 原则。真正该补全的，是块名 + 固定分隔符的组合模式。
- VS Code 安装
PostCSS Language Support插件，它能识别.button后自动提示&__icon、&--large - 在组件文件顶部加注释模板：
// @bem button, button__icon, button--loading，配合Auto Rename Tag插件，改button时同步更新所有子类 - 禁用任何“智能缩写”插件（如 Emmet 的
.btn>span），它生成的btn__span是无效类名，BEM 不认标签语义
HTML 中 class 属性值被框架转义或构建工具截断怎么办
常见现象：写了 class="button button--primary"，但浏览器里渲染出来只有 button；或者 Vue 模板中 :class="['button', 'button--primary']"，结果编译后变成空字符串。这不是语法错，是工具链在“优化”你。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查构建配置：Vite / Webpack 的
cssnano必须关闭mergeLonghand和reduceTransforms，否则button button--primary button--disabled会被压成button button--primary - JS 中永远用数组拼接：
className={["button", isPrimary && "button--primary"].filter(Boolean).join(" ")}，别用字符串模板硬拼 - 避免在
class属性里写空格或点——class="button .button--primary"是非法 HTML，浏览器会静默丢弃后面部分
为什么在 HTML 里看到 card__title__link 就该立刻停手
card__title__link 看似“更精确”，实则是 BEM 最典型的伪合规写法。它暗示 title 和 link 是父子嵌套关系，但 BEM 明确禁止 element 嵌套 element——因为 link 很可能在其他地方复用（比如 sidebar、footer），它不该被绑定在 card 的 DOM 结构里。
- 正确拆分：
card__title+link（独立 block），或card__title+card__link（如果 link 确实只服务于 card 且无独立行为） - 判断标准：删掉
card这层，title__link能否单独存在？不能 → 就不该有这个类名 - 编辑器里一旦发现三段式类名（含两个
__），应触发警告——这不是格式问题，是组件边界模糊的信号
第三方组件（如 Element Plus、Ant Design）怎么套 BEM 外壳不打架
直接给 el-button 加 button--primary 类，或写 .el-button.button--primary 规则，等于主动放弃 BEM 的作用域隔离。样式还是会受全局 .el-button 影响，且无法和设计稿对齐。
- 包裹一层 BEM 块：
<div class="my-form__submit"><el-button></el-button></div>，然后在 CSS 里写.my-form__submit ::v-deep .el-button（Vue）或.my-form__submit .el-button（普通 CSS） - 禁止覆盖第三方原始类名，所有定制样式必须通过你的块名向下穿透
- 设计师标注的 “提交按钮” 对应的是
my-form__submit，不是el-button—— 这个映射关系必须在组件文档里写死，否则 PR 评审时没人知道该改哪个文件
最常被忽略的一点：BEM 类名不是写完就完事的装饰，它是组件边界的快照。每次你在编辑器里敲下 __ 或 --，实际是在回答一个问题——这个东西，到底能不能脱离当前上下文独立存在？答案模棱两可时，别急着写类名，先画 DOM 结构图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
