bem通过block__element--modifier将归属、角色、状态硬编码进类名，使组件自带作用域与语义，复制即用；禁用后代选择器、统一rem单位、无单位line-height、禁止!important、固定html结构、修饰符仅表明确切状态，确保跨项目复用时结构完整、尺寸稳定、状态可控。
BEM让组件真正“拎得走”，不是靠运气，而是靠类名自带作用域和语义。
为什么BEM类名能直接提升复用率
传统写法里.btn、.active这种泛化类名一跨模块就打架；BEM强制把上下文塞进名字里，比如search-form__submit——光看类名就知道它属于哪个组件、扮演什么角色、能不能单独抽离。
常见错误现象：button--large被复制到另一个项目后，发现line-height错乱、padding缩放异常，因为原项目依赖父级font-size，而新环境没对齐。
- 所有尺寸单位统一用
rem，但line-height必须用无单位数值（如1.5），避免继承污染 - 禁止用
!important，状态全靠button--disabled这类显式类控制，不靠JS改style - HTML结构必须固定，比如按钮永远是
<button class="button"><span class="button__text">提交</span></button>，不能有的地方套div，有的地方直接span
修饰符（Modifier）怎么写才不会破坏复用性
修饰符不是“加个样式”，而是定义可预测的状态变体。写错就会让组件在不同业务场景下表现不一致。
容易踩的坑：user-card__avatar--round看似规范，但avatar是独立资源，不该被user-card强耦合；应改为icon--avatar--round或avatar--rounded，让它能脱离上下文存在。
- Modifier名必须对应明确状态：用
button--loading，不用button--big（big是相对谁？没基准） - 禁止嵌套修饰：
button__icon--large--rotate是反模式，应拆成button__icon button__icon--large button__icon--rotate - Block命名要抽象，比如
hero-banner比homepage-hero-banner更易复用，上下文用hero-banner--homepage表达
现有项目里怎么判断一个组件是否真能复用
别只看CSS有没有BEM，重点检查它是否满足“原子组件”四要素：统一结构、无外部依赖、完整交互链路、性能可控。
常见错误现象：团队说“已抽Button组件”，结果代码里还带着jQuery('.modal .button').on(...)，或者内联style="color: #333"——这种根本没法挪到新页面。
- HTML结构必须完全固定，不能靠JS动态拼接class或插入DOM
- CSS里禁用任何依赖DOM路径的选择器，如
.card > .title或div .button - 所有状态类（
button--disabled、button--success）必须在CSS中预定义，不靠运行时计算生成
真正难的不是写对block__element--modifier，而是让每个block在脱离原项目上下文后，仍能保持结构完整、尺寸稳定、状态可控——这需要从HTML骨架、CSS单位、JS绑定方式三处同时约束，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
