bem类名必须写在.module.css文件中，不能用全局global.css；next.js的css modules通过哈希化实现组件级样式隔离，确保.block__element类名唯一，避免跨组件覆盖。
Next.js里BEM类名该写在哪种CSS文件里
必须用 .module.css，不能用全局 global.css。BEM本质是组件级样式隔离方案，而全局CSS没有作用域限制，.card__title 一旦在多个组件中出现，就会互相覆盖——这直接违背BEM“块独立”的前提。
常见错误是把BEM类名全塞进 global.css，以为命名规范了就安全。实际只要两个组件同时引入这个文件，且都用了 .modal__close，样式就串了。Next.js的CSS Modules会在构建时自动为每个类名哈希化（如 modal__close_abc123），这才是BEM能真正落地的基础。
- ✅ 正确路径：
components/Card/Card.module.css，只被Card组件导入 - ❌ 错误路径：
app/ui/global.css，所有页面共享，BEM类名失去唯一性 - ⚠️ 注意：Sass/SCSS也得配合
.module.scss后缀，否则@use或嵌套规则会破坏模块作用域
BEM三段式命名在Next.js里怎么动态拼接
React里不能靠字符串拼接生成BEM类名，比如 className={`card__title ${isActive ? 'card__title--active' : ''}`> 看似可行，但容易漏掉空格、多加空格，或在条件复杂时出错。要用 clsx 这类工具函数做安全合并。
更关键的是：修饰符（--modifier）必须和对应块/元素绑定，不能脱离上下文单独使用。比如 card__title--active 只能修饰 card__title，不能给 header__title 用——否则语义断裂，协作时没人能猜出这个类到底属于哪个块。
- ✅ 推荐写法：
className={clsx(styles['card__title'], isActive && styles['card__title--active'])} - ❌ 危险写法：
className="card__title card__title--active"（绕过CSS Modules哈希，全局污染） - ⚠️ 注意：
clsx不处理BEM语义，它只拼字符串。你仍需人工确保card__title--active在Card.module.css中真实存在且只用于card__title
如何避免BEM与Tailwind混用时的语义冲突
Next.js项目常同时用BEM结构 + Tailwind视觉样式，比如 className="card card--featured p-6 bg-white"。问题在于：BEM的 card--featured 和Tailwind的 p-6 都在控制外观，但前者是语义变体（“这是特荐卡片”），后者是具体值（“内边距6px”）。两者混在同一class属性里，会让样式意图模糊。
真正要警惕的是用Tailwind覆盖BEM的结构职责。例如用 flex-col 替代 card__content 的布局逻辑，会导致BEM元素名失效——card__content 不再代表“内容区域”，而只是个空壳。
- ✅ 分层原则：BEM管结构与语义（
card,card__header,card--featured），Tailwind管视觉细节（p-4,text-lg,bg-gray-50） - ❌ 反模式：
className="card__header flex items-center justify-between"—— 把布局逻辑从CSS抽离到JS，BEM元素失去意义 - ⚠️ 注意：禁用
@apply封装BEM修饰符（如@apply card--featured），这会让Tailwind配置和BEM命名耦合，修改任一端都需同步改另一端
BEM组件复用时样式为何还是串了
最常被忽略的一点：BEM不是光靠类名就能保证隔离。如果两个组件都导入了同一个 Card.module.css 文件，它们的 card__title 类名会被编译成不同哈希（如 card__title_abc 和 card__title_def），看起来不冲突——但如果你在CSS里写了 .card__title { color: blue; } 这种未哈希的选择器，它就会全局生效。
根本原因在于：CSS Modules默认只对类选择器哈希，不对标签、属性、伪类等选择器处理。所以哪怕你严格写了BEM命名，只要CSS里出现 input:focus 或 [type="submit"]，就可能意外影响其他组件。
- ✅ 安全写法：所有样式必须基于BEM类名，禁止在
.module.css里写任何非类选择器 - ❌ 隐患写法：
input.card__input:focus { outline: 2px solid #0070f3; }——:focus是伪类，不被哈希，全局生效 - ⚠️ 注意：VS Code插件如BEM Helper自动生成类名时，不会校验你是否在CSS里偷偷写了非BEM选择器，这类错误只能靠Code Review或PostCSS插件拦截
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
