CSS如何避免样式污染？BEM规则详解

CSS样式污染源于其全局作用域特性，导致类名冲突、第三方组件样式被意外覆盖；BEM通过block__element--modifier的严格命名约定，在不依赖构建工具的前提下主动划分样式边界，以语义化、可预测的方式实现模块隔离——它不是教条式命名规则，而是一套要求HTML结构与CSS类名层级完全对齐的协作契约，成败关键在于开发者是否始终自觉维护这种结构一致性，而非寄望于更高权重选择器或自动化工具兜底。

为什么 .btn 会意外影响第三方组件

根本原因不是你写了太多 .btn，而是 CSS 默认是全局作用域。只要页面里任意地方定义了 .btn，它就会匹配所有带 class="btn" 的元素——包括你没控制权的第三方库节点。

常见错误现象：Ant Design 的按钮突然变蓝、Element Plus 的输入框边框消失、自己写的 .modal 把 react-modal 的遮罩层撑开。

• 别指望靠「写得更具体」来解决，比如 div .btn 或 .my-app .btn —— 这类选择器权重高、可维护性差，且一旦第三方组件动态插入节点（如弹窗挂载到 body），就彻底失效
• BEM 不是命名规范教条，它是用命名约定主动切割样式边界：每个模块的类名自带前缀，天然隔离
• 注意 BEM 的 block 必须对应一个真实 DOM 容器（如
  ），不能只在 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 的