BEM通过.block__element--modifier命名规范显性化样式作用域，解决通用类滥用导致的覆盖混乱；改造需收口孤立样式类、扁平化嵌套、校验修饰符与元素命名，并用postcss-bem-linter自动约束。
为什么直接套用 .btn 类名在多个组件里会越写越乱
因为没区分「角色」和「归属」。比如一个按钮在 Header 里是 .btn，在 Modal 里还是 .btn，但实际需要的边距、字体大小、禁用态表现全不一样——最后只能靠加 !important 或写一堆后代选择器硬覆盖。
BEM 的核心不是多写几个下划线，而是让样式作用域显性化：
-
.button是块（Block）：独立、可复用的 UI 单元 -
.button__icon是元素（Element）：只属于.button的子结构，不单独存在 -
.button--primary是修饰符（Modifier）：描述状态或变体，不影响结构
这样写出来的类名自带上下文：.card__header--large 一眼知道它是卡片头部的放大版本，不会误用到 .modal__header 上。
怎么把现有 CSS 快速改造成 BEM 风格（不重写）
不用推倒重来，从最常被滥用的「通用类」开始收口：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有孤立的
.primary、.small、.text-center这类纯样式类——它们是冗余根源 - 把
.btn.primary改成.btn--primary，把.form-group .input改成.form-group__input - 遇到嵌套过深的选择器（如
.sidebar .nav li a），直接提取为.nav__link，并确保它只在.nav块内使用
关键判断标准：如果去掉父级类名，这个样式还成立吗？如果不行，就该用 __ 显式绑定。
block__element--modifier 写法里最容易漏掉的三个细节
BEM 看似简单，但三处不注意就会退化回老写法：
- 修饰符必须作用于块或元素本身，不能单独存在：
.button--loading✅，.loading❌ - 元素名不能带层级语义：
.button__icon--left✅，.button__icon-left❌（后者容易让人误以为icon-left是另一个元素） - 避免「伪修饰符」：
.button--btn-lg是典型错误——lg是尺寸，不是业务状态；应该用.button--large或统一由设计系统定义--size-large
这些不是命名洁癖，而是防止团队协作时，有人写 .btn-large，有人写 .button-lg，最后样式表里塞满同义重复规则。
用 PostCSS 插件自动校验 BEM 规则是否写歪了
人总会手滑，尤其改旧项目时。推荐加个 postcss-bem-linter，它能立刻报出：
- 用了未声明的元素名（比如写了
.card__footer，但配置里只允许header/body） - 修饰符拼写不一致（
--primary和--Primary被视为不同） - 出现
.block .element这种后代选择器（BEM 原则上只允许单类名组合）
配置示例（postcss.config.js）：
module.exports = {
plugins: [
require('postcss-bem-linter')({
preset: 'bem',
selectors: {
'block': /^[a-z][a-zA-Z0-9]+$/,
'element': /__([a-z][a-zA-Z0-9]+)$/,
'modifier': /--([a-z][a-zA-Z0-9]+)$/
}
})
]
}
真正难的不是写出 BEM，是让所有人写的 BEM 是同一套 BEM。约束机制比文档管用得多。
