如何在CSS BEM中处理不同浏览器引擎的兼容性样式？-css教程-PHP中文网

ie11下:not()会导致整条css规则被浏览器跳过，而非仅伪类失效；应改用显式修饰符拆分规则，如将.card:not(.card--disabled) .card__button拆为.card .card__button和.card--disabled .card__button { display: none; }。

如何在css bem中处理不同浏览器引擎的兼容性样式？

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 静默失败，问题会散落在各处。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

容器布局必须由 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"></my-button>，Shadow DOM 里的按钮不会自动继承这些类。BEM 类名只存在于 Light DOM，Shadow DOM 默认看不见它们——这不是兼容性问题，是 Shadow DOM 的原生隔离机制。

想让外部样式影响 Shadow DOM，必须组件作者显式声明：<button part="button"></button>
外部用 my-button::part(button) + BEM 修饰符组合，比如 my-button::part(button).button--large
第三方组件（如 Ant Design）要包裹在 BEM 块内：<date-picker-wrapper class="myapp-date-picker"></date-picker-wrapper>，所有自定义样式以 .myapp-date-picker 开头

BEM 的兼容性优势不在“降级”，而在“不依赖”。它天然规避了选择器深度、伪类嵌套、属性选择器等易断层环节，但一旦和 :not()、平台修饰符、Shadow DOM 透传混用，那些被绕开的坑就会原样冒出来。