bem通过block-element-modifier命名结构显式声明样式归属，避免class名冲突；block为独立功能单元，element属其下并用双下划线连接，modifier描述状态且用双连字符，禁止跨block嵌套。
为什么直接用 class 名会冲突
多人协作或引入第三方 UI 库时，.button、.header 这类通用名极易被覆盖——后加载的 CSS 规则会生效，不管它写在哪个文件里。浏览器不认“谁写的”，只看层叠顺序和优先级。哪怕加了 !important，也只是把问题往后推，没法根治。
BEM 命名不是加前缀，而是建结构
BEM（Block–Element–Modifier）本质是把样式归属关系显式写进 class 名里，让每个 class 都自带作用域上下文。它不依赖 CSS 作用域机制（比如 Shadow DOM），纯靠命名约定隔离。
关键点：
-
block是独立功能单元，如card、search-form -
element必须属于某个 block，用双下划线连接：card__title、search-form__input -
modifier描述状态或变体，用双连字符：card--featured、button--disabled - 不允许跨 block 嵌套元素，比如
card__button可以，但header__card__title违反 BEM
实际项目中怎么落地才不翻车
很多人照着 BEM 写了一堆 user-profile__avatar--large，结果组件一复用就懵：父级改名，所有子 class 得同步改。这不是 BEM 的问题，是没理解它的边界。
推荐做法：
- Block 名尽量对应可复用的 React/Vue 组件名，比如
ProductCard→product-card - Element 不要过度细分，
product-card__image比product-card__image-wrapper__inner更可持续 - Modifier 仅用于视觉/行为差异，不用来表达业务逻辑，比如别写
product-card--in-stock，用 JS 切换product-card--available更合理 - 配合 CSS Modules 或 scoped style 使用效果更稳，BEM 负责语义，模块系统负责物理隔离
遇到 legacy 代码怎么渐进改造
老项目满屏 .btn、.modal-content，不可能一夜重命名。先锁定高频冲突点，再分三步走：
- 新功能/新组件严格按 BEM 写，不妥协
- 老组件只在发生样式冲突时，局部升级：比如把
.modal改成legacy-modal，再逐步拆出legacy-modal__body - 用 PostCSS 插件（如
postcss-bem）辅助生成 BEM 类名，但别让它代替人工判断结构
BEM 真正难的不是记规则，而是每次写 class 前多问一句：“这个样式属于谁？它会不会在别的上下文里意外生效？”——这句问题比任何命名规范都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
