根本原因是CSS全局作用域导致样式污染；BEM通过block__element--modifier命名约定主动隔离样式边界，要求HTML结构严格匹配命名层级，否则样式失效。
为什么 .btn 会意外影响第三方组件
根本原因不是你写了太多 .btn，而是 CSS 默认是全局作用域。只要页面里任意地方定义了 .btn，它就会匹配所有带 class="btn" 的元素——包括你没控制权的第三方库节点。
常见错误现象：Ant Design 的按钮突然变蓝、Element Plus 的输入框边框消失、自己写的 .modal 把 react-modal 的遮罩层撑开。
- 别指望靠「写得更具体」来解决，比如
div .btn或.my-app .btn—— 这类选择器权重高、可维护性差，且一旦第三方组件动态插入节点（如弹窗挂载到body），就彻底失效 - BEM 不是命名规范教条，它是用命名约定主动切割样式边界：每个模块的类名自带前缀，天然隔离
- 注意 BEM 的
block必须对应一个真实 DOM 容器（如<div class="header">），不能只在 CSS 里写.header__title却不给父级加.header
__ 和 -- 到底怎么分，写错会怎样
BEM 三段式：block__element--modifier。错用最直接的后果是样式无法命中，或者修改器行为错乱。
使用场景：当你需要表达「同一个功能的不同状态或变体」时才用 --；当需要拆解组件内部结构时才用 __。
立即学习“前端免费学习笔记（深入）”；
-
button__icon✅ 表示 button 内部的图标区域；button-icon❌ 这成了另一个 block，失去父子关系，hover 时无法联动控制 -
input--disabled✅ 修改器必须依附于 block，单独存在无意义；input__label--disabled❌ 元素级修改器极难维护，且语义混乱 - 参数差异：
--后面只能接布尔状态（--small、--error）或枚举值（--theme-dark），不能接尺寸数值（--width-200）——那该用内联样式或 CSS 变量
和 CSS Modules / scoped CSS 比，BEM 哪里不能省
BEM 是纯命名约束，不依赖构建工具或框架能力。但它换来了明确的协作契约，代价是你得亲手守规矩。
性能影响几乎为零，兼容性覆盖所有浏览器（连 IE8 都行），但容易踩的坑藏在开发习惯里：
- 不要在 JS 里拼接类名：
className={`button__text button__text--${size}`}✅；className="button__text " + sizeClass❌ —— 字符串拼错一个_就断链 - 避免跨 block 滥用
__：card__button可以，但card__modal-close不行——modal是独立 block，应写成modal__close并确保它在modal容器内 - scoped CSS（如 Vue 的
<style scoped>）会自动加属性选择器，但 BEM 类名若漏写，编译器不会报错，样式就静默失效
要不要用 @bem/sdk 或 PostCSS 插件
不需要。BEM 的核心价值在于人脑可读、团队可对齐，工具反而增加认知负担。
真正要检查的是 HTML 结构是否严格对应命名层级：
- 如果写了
form__field--required，HTML 中必须有<div class="form"><div class="form__field form__field--required">—— 缺少外层.form，这个--required就只是个普通类名 - PostCSS 插件（如
postcss-bem）会帮你生成嵌套写法，但容易掩盖结构问题：开发者以为& .field { &--required {} }就安全了，其实 HTML 没套对容器照样白搭 - 最有效的约束是 ESLint + stylelint 组合：用
stylelint-selector-bem-pattern校验类名格式，用eslint-plugin-jsx-a11y配合检查 class 使用是否符合 DOM 层级
复杂点不在规则多，而在每次写 HTML 时都得想清楚：这个节点属于哪个 block？它是不是某个 element？有没有必要加 modifier？没人替你判断，也没法靠工具兜底。
