@layer能解决BEM项目里最头疼的样式覆盖问题：它通过声明顺序明确层优先级，要求所有BEM相关CSS必须显式包裹在@layer bem中，否则仍会被legacy规则覆盖。
@layer能解决BEM项目里最头疼的样式覆盖问题
直接说结论：@layer不是给BEM“锦上添花”，而是堵住它在多团队、渐进式重构中必然出现的层叠漏洞。BEM类名再规范，也挡不住旧CSS规则靠选择器权重或加载顺序偷偷覆盖新.card__body——@layer bem一加，浏览器就明确知道：“这块样式属于BEM层，优先级由我排，不归旧全局规则管”。
必须按顺序声明@layer，否则BEM规则会被legacy吃掉
常见错误是把@layer legacy写在@layer bem后面，结果旧规则反而压过新BEM类。现代浏览器按声明顺序决定层优先级：后声明的层更高。
-
@layer base, components, utilities——这是推荐的基础分层，但BEM项目只需legacy和bem两层 -
@layer legacy { .old-header { color: red; } }必须出现在@layer bem之前 - 所有BEM相关CSS（包括
@layer components里的@apply块）都得包裹进@layer bem，否则PurgeCSS可能删掉它们 - 如果用PostCSS插件自动注入
@layer，确认它没把@layer bem塞进components.css文件末尾——位置错等于白加
BEM类名本身不参与@layer分层，但必须配合使用才安全
很多人以为只要类名叫card__header，就天然受@layer bem保护。其实不是：@layer只管CSS规则所在的代码块，不管HTML里写了什么类名。你写<div class="card__header"></div>，但CSS没放进@layer bem，照样被.old-header h2覆盖。
- 所有BEM结构的CSS定义（.block、.block__element、.block--modifier）必须显式放在
@layer bem { ... }内 - Tailwind的
@apply写法也得包进去，比如@layer bem { .card__header { @apply p-4 bg-white; } } - 禁止在
@layer bem里混写非BEM规则，比如.legacy-modal .btn——这会污染层语义，调试时无法区分来源 - 如果项目还用了CSS自定义属性做主题，
@property声明建议放在@layer base，确保它对legacy和bem都可见
真实协作中容易忽略的细节：@layer不解决DOM污染，只解决CSS层叠
你加了@layer bem，但老页面的<div class="legacy-wrapper"><div class="card__header"></div></div>依然可能因继承或all: unset失效。这时候@layer管不了DOM结构，它只管CSS规则怎么生效。
立即学习“前端免费学习笔记（深入）”；
- 旧容器加命名空间根类（如
legacy-wrapper）仍是必要手段，@layer不能替代它 -
.legacy-wrapper { all: unset; }要慎用，它会清空所有继承值，包括font-family和color，得手动补全 - BEM组件内部仍需重置基础样式：
box-sizing: border-box、margin: 0、padding: 0——@layer不会帮你自动加这些 - 最危险的盲区：JS通过
querySelector('.card__header')取到元素，但样式没生效，别急着查JS逻辑，先看DevTools里这个类名对应的CSS规则是否真在@layer bem里
