webpack中启用css modules需保留bem语义：配置localidentname为[name]__[local]--[hash:base64:5]，禁用[path]/[folder]，避免exportonlylocals；跨项目加postcss-prefixwrap前缀；scss嵌套仅限&__elem和&--mod；react中统一block名并用classnames绑定。
Webpack中启用CSS Modules并保留BEM语义
直接开css-loader的modules开关会把.card__title编译成card__title_abc123，BEM类名语义全丢，跨项目复用时连调试都困难。必须保留原始命名，只做作用域隔离。
正确做法是在webpack.config.js里配置css-loader的localIdentName，但值不是哈希，而是固定格式：
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
这样Card.module.scss里的.card__title会变成Card__card__title--f8a2b，既保持card__title可读，又靠文件名前缀实现隔离。
- 禁用
[path]或[folder]——路径太长，且不同项目目录结构不一致，破坏可移植性 - 不用
exportOnlyLocals: true——它会让全局类（如重置样式）失效 - 如果组件需被其他项目直接import，建议在package.json里声明
"sideEffects": ["*.module.css", "*.module.scss"]，避免tree-shaking误删
PostCSS插件自动注入业务命名空间前缀
跨项目迁移时，光靠文件级模块化不够——.header在两个项目里都存在，合并后照样冲突。得在构建时统一加前缀，比如sales-header。
推荐用postcss-prefixwrap，而不是手写.sales-header .header__logo：
plugins: [
require('postcss-prefixwrap')('.sales-header')
]
它会把整个CSS文件所有规则包裹进该前缀下，且不破坏BEM扁平结构。
- 前缀必须加在最外层容器HTML元素上，比如
<div class="sales-header">，不能靠CSS模拟 <li>避免用<code>:where(.sales-header) .header__logo——:where会重置优先级，导致.header__logo--active覆盖失败 - 若项目已用Tailwind，注意
postcss-prefixwrap对@layer规则支持有限，建议把BEM样式和Utility类分文件管理 -
.card { &__title { ... } &--featured { ... } }——生成.card__title和.card--featured，没问题 -
.card { &__title { &:hover { ... } } }——伪类可以嵌套，但不能出现空格后代选择器 - 禁止
.card { &__title { .icon { ... } } }——.icon没带card上下文，未来可能被其他模块的.icon污染
SCSS中安全使用BEM嵌套而不破坏隔离性
很多人在SCSS里写.card { &__title { ... } &--featured { ... } }，看着干净，但一旦加空格（比如&__title a），就生成后代选择器，耦合HTML结构，违背BEM初衷。
真正安全的写法只有两种：
遇到“子元素的子元素”，比如.product-card__price__currency，这不是BEM，是反模式。应该拆成独立Block：.currency，再用.product-card__price .currency组合——后者是HTML层级关系，不是CSS选择器依赖。
与React组件配合时避免classnames拼接失控
写className={`card__header ${isExpanded ? 'card__header--expanded' : ''}`>看似无害，但Modifier状态分散、易漏、难测试。更糟的是，如果组件内部用card作Block名，而父组件传入className="my-card__header"，两边类名根本对不上。
可靠做法是组件内统一定义Block名，并用classnames收敛状态：
const BLOCK = 'product-card';
const cx = classnames.bind(styles);
return <div classname="{cx(BLOCK," isloading>
<h3 classname="{cx(`${BLOCK}__title`)}">...</h3>
</div>
- 不要把Block名硬编码进JSX——它得和SCSS文件名、CSS类名完全一致，否则模块化失效
- Modifier类名必须用
${BLOCK}--xxx动态生成，不能手写字符串，防止拼写错误 - 如果项目用TypeScript，可给
BLOCK加as const，让编辑器自动提示可用的Modifier
BEM不是写法规范，是作用域契约。Webpack里每一步配置，本质都是在加固这个契约——类名不变形、前缀不丢失、嵌套不越界、状态不散落。稍一松懈，就退回“改一个按钮，炸三个页面”的老路。
