CSS Modules通过模块化隔离缓解BEM类名冲突，从而减少冗余Modifier和前缀，但不自动压缩类名长度；需配合严格BEM结构、条件化类名拼接及postcss-bem-linter校验才能发挥最佳效果。
为什么CSS Modules能缓解BEM类名臃肿，但不能直接替代BEM语义
CSS Modules 本身不解决 BEM 类名长的问题，它只是把 .card__title--large 这种字符串自动哈希成 _card__title--large_abc123。HTML里仍会看到完整原始类名（除非启用 localIdentName 压缩），真正起作用的是「模块化隔离」——它让 card__title 不再怕跟其他组件的同名类冲突，从而允许你**收敛 Modifier 数量、删掉冗余状态类、避免为防污染而过度加前缀**。
常见错误现象：className={styles['card__title--large--theme-dark--is-loading']} 在 CSS Modules 里照样写出来，体积没减，还失去可读性。
- Modifier 必须收口：一个 Block 的所有
--*修饰符应在 JS 层统一管理，比如只暴露size、theme、state三个字段，而不是把全部组合类名都塞进styles - 禁止在
import styles from './Card.module.css'后手动拼接字符串，要用对象解构 + 条件判断：{[styles['card__title'], styles['card__title--large'], isDark && styles['card__title--dark']].filter(Boolean).join(' ')} - 构建时开启
localIdentName=[name]__[local]--[hash:base64:5]可压缩长度，但别设成[hash]—— 调试时完全无法对应源码
CSS Modules + BEM 的正确类名映射方式
关键不是让 CSS Modules “生成 BEM”，而是让它**承载 BEM 的结构约束**：Block 对应文件名，Element 和 Modifier 对应类名键，且必须严格遵循三段式。否则就退化成普通 scoped CSS，失去 BEM 的语义自治能力。
使用场景：React 中 Card.tsx 引用 Card.module.css，里面只允许出现 .card、.card__header、.card__body、.card--featured 等，不允许 .card__header--blue 或 .header 这种跨块或无前缀写法。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
.card必须是文件主类名，且在 JSX 中作为根节点 class 出现；其他类名只能作为子元素或状态附加 - Element 类名（如
card__footer）不能单独用于非card组件内，否则破坏 BEM 的归属语义 - Modifier 类名（如
card--loading）必须和 Block 同级使用：<div classname="{`${styles.card}" : styles>，不能套在 <code>card__content上如何用 postcss-bem-linter 防止 BEM 写歪
postcss-bem-linter不是锦上添花的工具，它是防止团队协作中 BEM 快速退化的最后一道闸。它能立刻报出：Invalid element name 'icon-left' in '.button__icon-left'或Modifier '--lg' not allowed for block 'card'。配置要点：
- 在
bem-linter配置里显式声明每个 Block 允许的 Element 和 Modifier 列表，例如card: { elements: ['header', 'body', 'footer'], modifiers: ['featured', 'loading'] } - 配合 Webpack 的
css-loader使用时，确保 linter 运行在postcss-loader阶段，早于哈希生成 —— 否则报错位置指向哈希后类名，无法定位源文件 - 禁用
ignore选项：有人为绕过校验加/* bem-linter ignore */，结果全项目蔓延，等于关掉安全带
HTML 体积没降？检查你是否还在手动拼接 Modifier
最常被忽略的一点：CSS Modules 没法帮你自动剔除未使用的 Modifier 类名。如果你在 JSX 里写
className={`${styles.card} ${styles['card--large']} ${styles['card--dark']} ${styles['card--loading']}`}，即使当前 props 里size='sm'、theme='light'，这些类名仍会出现在最终 HTML 中 —— PurgeCSS 也救不了，因为它们是运行时动态拼的。真正可控的方式只有两种：
- 用
clsx或classnames库做条件组合：clsx(styles.card, size === 'large' && styles['card--large'], theme === 'dark' && styles['card--dark']) - 把 Modifier 映射封装成函数：
const getCardModifiers = ({ size, theme, state }) => [size && styles[`card--${size}`], theme && styles[`card--${theme}`], state && styles[`card--${state}`]].filter(Boolean) - 绝对不要在
useEffect里用el.className = ...手动赋值 —— 这类操作绕过 React diff，PurgeCSS 完全不可见，且无法 SSR
Modifier 类名是否出现在最终 HTML，取决于 JS 运行时逻辑，而不是 CSS 文件里有没有定义它。这点比选择器权重更难调试。
- 在
