bem 中 dom 节点应为 block 当其能脱离上下文独立存在、复用、测试；否则为 element。共用视觉组件（如 user-avatar）须为独立 block，禁用泛标签名（如 div__title），element 不得嵌套命名（如 card__content__title 错误），modifier 按状态归属加在 block 或 element 上，css 必须单 class 选择器，block 名须对应可交付 ui 单元。
直接用 block__element--modifier 结构写 class 名就行，但错在“怎么分块”和“谁该当 element”，不是套格式就能对。
怎么判断一个 DOM 节点该是 block 还是 element
关键看它能不能脱离当前上下文独立存在、复用、测试。比如页面里有 header__logo，但 logo 同时出现在 footer 和 user-card 里——那它就不是 header 的 element，而是独立的 logo block。
- ✅ 正确：多个模块共用同一个视觉组件（如 icon、avatar、tag），就该是独立 block，命名带业务含义，如
user-avatar、status-tag - ❌ 错误：用泛标签名或容器名当 block，如
div__title、section__content——这些没语义，无法复用，也容易被其他模块意外覆盖 - ⚠️ 容易踩坑：把结构位置当语义。比如按钮里放个图标，DOM 是
<button><span><i></i></span></button>，如果这个图标只服务按钮（不暴露 props、不单独配色/尺寸），才可叫btn__icon；否则就是iconblock
element 命名为什么不能嵌套，比如 card__content__title
BEM 不允许 __ 出现在 element 名里，因为 element 必须直属 block，且只表达一层从属关系。出现双下划线嵌套，说明你把结构层级当成了语义层级。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确：
card__title、card__body、card__footer—— 全是card的直接子元素 - ❌ 错误：
card__content__title—— 这暗示 content 是 block，title 是它的 element，但 content 本身没有封装能力，只是个 wrapper div - ? 解法：删掉无意义 wrapper，让 title 直接挂
card下；或把 content 提升为 block（仅当它真有独立逻辑/复用场景）
modifier 什么时候加在 block 上，什么时候加在 element 上
modifier 描述的是「谁的状态变了」。它不负责布局控制，也不传递上下文，只开关样式或行为。
- ✅ 加在 block 上：
btn--loading、input--error—— 整个组件进入某种状态 - ✅ 加在 element 上：
menu__item--active、form__label--required—— 仅该部分表现不同 - ❌ 避免：
btn--in-modal、card--on-mobile—— 这类 modifier 实际是容器约束，应由父级 wrapper 类（如modal__content）或媒体查询处理 - ⚠️ 注意顺序：多个 modifier 平级组合，如
btn--primary btn--large btn--disabled，不要合并成btn--primary-large-disabled
CSS 里为什么不能写 .card .card__title
BEM 要求所有样式都基于单个 class 选择器，禁止依赖 DOM 结构。嵌套选择器会带来耦合、权重升高、复用困难等问题。
- ✅ 正确：
.card__title { font-size: 1.2em; }—— 独立可复用，不关心父元素是不是.card - ❌ 错误：
.card .card__title或div.card__title—— 一旦 HTML 结构微调（比如加了个 wrapper），样式就失效 - ? 工具建议：用
stylelint-selector-bem-pattern插件自动校验，比人工 review 更可靠
最常被忽略的一点：BEM 不是字符串拼接游戏，block 名必须真实对应一个可交付的 UI 单元。写完 class 名，要能立刻回答“这个 block 的 props 是什么？它在哪几个页面用了？能不能单独抽成 npm 包？”——答不上来，大概率命名错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
