IE11下:not()会导致整条CSS规则被浏览器跳过，而非仅伪类失效；应改用显式修饰符拆分规则，如将.card:not(.card--disabled) .card__button拆为.card .card__button和.card--disabled .card__button { display: none; }。
IE11 下 :not() 会让整条 BEM 规则失效
不是类名不生效，是浏览器直接跳过含 :not() 的整条 CSS 规则。比如你写 .card:not(.card--disabled) .card__button，IE11 解析到 :not() 就停止处理，后面再精准的 .card__button 也白搭。
- 改用显式修饰符对：把
.card:not(.card--disabled) .card__button拆成.card .card__button和.card--disabled .card__button { display: none; } - SCSS 中禁用
&:not(&--disabled)这类写法，编译后必然带:not() - 构建后检查生成 CSS，grep -r ":not(" dist/ —— 一旦发现就定位源文件删掉
display: flex 和 grid 的兼容边界在 BEM 里怎么划
BEM 不禁止用 Flex/Grid，但要求把布局能力“收束”到 Block 自身，而不是靠子元素类名或工具类驱动。否则 IE10/11 下 grid-gap 不支持、flex-wrap: wrap-reverse 静默失败，问题会散落在各处。
- 容器布局必须由 Block 类控制：
.list { display: flex; }，而不是靠外部.flex工具类 - 方向/对齐逻辑交给 Modifier：
.list--stacked控制flex-direction，.list--centered控制justify-content - IE11 不支持
grid-gap？那就加个.grid--no-gap，里面用margin模拟，不影响其他浏览器逻辑
为什么 --mobile 这种修饰符在 BEM 里是错的
--mobile 看似方便，实则把环境判断（设备类型）混进了组件状态语义里。BEM 的 --xxx 只能表达组件自身的意图状态，比如 button--disabled，不能表达“当前在手机上”。真机调试时，这个类名常因 JS 判断不准、WebView UA 识别偏差而漏加或误加。
- 所有尺寸适配必须走
@media，且写在 Block 内部：@media (max-width: 768px) { .header__nav--compact { display: flex; } } - 用语义化状态替代平台描述：不要
card--mobile，改用card--layout-stack或card--layout-two-col - 构建工具如
postcss-bem-linter会把孤立的--mobile当作非法修饰符报错
Web Components 中 BEM 类名根本进不了 Shadow DOM
在宿主元素上写 <my-button class="button button--large">，Shadow DOM 里的按钮不会自动继承这些类。BEM 类名只存在于 Light DOM，Shadow DOM 默认看不见它们——这不是兼容性问题，是 Shadow DOM 的原生隔离机制。
立即学习“前端免费学习笔记（深入）”；
- 想让外部样式影响 Shadow DOM，必须组件作者显式声明：
<button part="button"> - 外部用
my-button::part(button)+ BEM 修饰符组合，比如my-button::part(button).button--large - 第三方组件（如 Ant Design）要包裹在 BEM 块内：
<date-picker-wrapper class="myapp-date-picker">，所有自定义样式以.myapp-date-picker开头
:not()、平台修饰符、Shadow DOM 透传混用，那些被绕开的坑就会原样冒出来。 
