bem 不支持 --mobile 等平台修饰符，因其混淆状态语义、破坏可维护性且真机易失效；应通过 @media 控制响应式，用语义化状态修饰符（如 card--layout-stack）配合运行时逻辑实现跨端适配。

直接写 card--mobile 或 card__content--mobile 是错的——BEM 本身不支持平台修饰符，--mobile 这类命名会混淆状态语义、破坏可维护性，且在真机调试中极易失效。

为什么不能用 --mobile 作为平台修饰符

BEM 的修饰符（--xxx）只表达组件的**意图状态或外观变体**，比如 button--disabled、avatar--circle。而 “mobile” 不是状态，它是设备类型，属于环境维度，和组件自身语义无关。

• card--mobile 看似省事，实则让类名承担了本该由 @media 或运行时环境判断的职责
• 一旦设计稿调整为「小屏三列→两列」，你得改类名、改 CSS 媒体查询、改 JS 判断逻辑，三处同步风险高
• 小程序、PWA、WebView 中 DOM 结构微调后，--mobile 类可能被 JS 错误添加/遗漏，导致样式断层
• 构建工具（如 postcss-bem-linter）会把它识别为语义模糊的非法修饰符并报错

移动端差异该用什么方式落地

所有屏幕尺寸适配必须收口在块级 CSS 内部，通过 @media 规则驱动已有 BEM 类，而不是靠新增修饰符“开关”。

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

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

下载

• 基础类名保持稳定：card、card__header、card__image
• 在 Card.css 文件末尾统一加媒体查询区块：

  @media (max-width: 768px) {
    .card { margin: 0; }
    .card__header { padding: 12px 16px; }
    .card__image { width: 100%; }
  }

• 若小屏需结构级变化（如横向图+文 → 纵向堆叠），使用语义化状态修饰符：card--layout-stack，再由媒体查询控制其表现
• JS 可监听 resize 或 matchMedia 动态增删 card--layout-stack，但类名本身不含设备信息

小程序等特殊环境怎么处理

小程序里 @media 默认不生效，必须显式配置样式隔离策略。

• 在组件 JSON 中设 "styleIsolation": "apply-shared"，否则媒体查询规则会被忽略
• 避免用 page{} 或全局 responsive.css 注入响应式逻辑——这会让 BEM 块失去自治性
• SSR 场景下，服务端需根据 UA 预判是否注入 card--layout-stack，客户端 hydration 必须与之严格对齐，否则触发 mismatch
• 禁止用 platform === 'mobile' 拼接类名字符串，应封装成函数：cn('card', { 'card--layout-stack': isSmallScreen })

真正容易被忽略的是：BEM 类名不是占位符，而是契约。一旦把 --mobile 塞进类名，你就默认放弃了媒体查询的声明式能力、破坏了块的自治边界，并把设备判断逻辑硬编码进了 CSS 层——后续任何跨端迁移、A/B 测试或无障碍改造，都会因此多绕三步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！