BEM通过组件名前缀绑定样式作用域，避免层级选择器冲突和覆盖；强制类名结构（block__element--modifier）提升语义明确性与复用性；原子组件需统一结构、无外部依赖、完整交互链路及性能优化。
为什么BEM能减少CSS选择器冲突
因为BEM强制把样式作用域绑定到组件名上，避免靠层级关系（比如 .card .title）定位元素——这种写法一旦父容器结构微调，.title 就可能意外失效或被覆盖。
实际开发中常见错误现象：.button:hover 在多个模块里重复定义，结果一个页面引入两个组件时，后加载的CSS把前者的悬停效果悄悄覆盖了。
- BEM要求所有类名以组件名开头，比如
button组件下的状态类必须是button--disabled，修饰符类不能脱离上下文单独存在 - 元素名用双下划线，如
button__icon，它永远只属于button，不会和form__icon混淆 - 不推荐嵌套超过一层：禁止写
button__icon--large这种“修饰符套修饰符”，应拆成button__icon button__icon--large
怎么从现有项目里抽一个可复用的Button原子组件
关键不是重写CSS，而是统一HTML结构 + 类名约束 + 无外部依赖。很多团队卡在“这个按钮要适配老系统”，结果抽出来还是带内联样式或jQuery绑定的半成品。
使用场景：按钮要能在表单、弹窗、卡片底部、甚至iframe里一致渲染，且不因外层font-size缩放错乱。
立即学习“前端免费学习笔记（深入）”；
- HTML结构固定为：
<button class="button button--primary"><span class="button__text">提交</span></button>
- CSS只用
.button、.button--primary、.button__text三个类，不出现div > .button这类依赖DOM路径的选择器 - 尺寸单位全用
rem，但line-height用无单位数值，避免父级font-size干扰高度计算 - 禁用
!important，所有状态（--loading、--disabled）都通过添加类控制，不靠JS直接改style
为什么BEM类名变长反而提升维护效率
类名变长不是代价，是显式契约。比如看到header__logo-link，你立刻知道它属于header组件、是链接、且专用于logo——而不是翻遍CSS文件猜.logo-link到底绑在哪个header上。
容易踩的坑：用工具自动生成BEM类名（如block__element--modifier模板），结果产出user-card__avatar--round这种看似规范实则语义断裂的类——user-card是容器，avatar是独立资源，它不该被user-card强耦合。
- 原子组件（Button、Input、Icon）的BEM名必须能脱离上下文独立存在，
icon--close比modal__icon--close更合理 - 当一个UI片段在多个业务模块复用（如搜索框），优先按功能命名
search-input，而非按位置命名header__search - 类名长度超40字符时，检查是否塞进了状态或值（如
button--primary-large-with-icon），应拆成button--primary button--large button--has-icon
抽取原子组件时最容易被忽略的边界条件
不是视觉还原度，而是交互反馈链路是否完整。比如Button组件只写了:hover和:focus，但没处理键盘Tab聚焦后的outline偏移、高对比度模式下的可见性、或屏幕阅读器的aria-pressed状态同步。
性能影响常被低估：一个button--loading状态如果靠CSS动画驱动旋转图标，但没加will-change: transform或用transform替代left/top位移，在低端安卓机上会掉帧。
- 所有伪类状态（
:active、:focus-visible）必须显式声明，不能依赖浏览器默认 - 图标类（如
icon--download）必须支持background-image和inline SVG双实现，避免字体图标在无网络时空白 - 组件CSS文件里禁止出现
@import，所有依赖（如颜色变量）通过CSS自定义属性注入，方便主题切换
