bem-constructor仅生成符合bem规范的类名字符串，不处理css；需先createbem初始化实例，通过柯里化调用生成类名；多环境须共享同一实例，修饰符非布尔值会静默拼入导致样式失效。
它不生成CSS模板，只生成符合BEM规范的类名字符串。所谓“自动化生成CSS”，是误解——bem-constructor本身不写一行CSS，也不编译、不注入样式，它只管把block、element、modifier这些输入，按规则拼成button__icon--large这样的字符串。
为什么不能直接用字符串拼接代替bem-constructor
手写base + '__' + elem + '--' + mod在简单场景下看似可行，但实际会快速失控：
- 修饰符为
false或null时，需手动过滤，否则生成button--undefined这类无效类名 - 嵌套块（如
card内含article__card__header）需提前注册父子关系，拼接逻辑无法自动推导层级 - 分隔符（
__和--）一旦在项目中被临时改成-或_，所有拼接点都要同步改，极易漏 - React组件里条件多时，
className={`${b}__label ${b}--${type} ${isDisabled ? b + '--disabled' : ''}`>可读性差，且b变量名易错、难定位来源
bem-constructor的正确初始化与调用方式
它不是开箱即用的全局函数，必须先createBem初始化一次，才能获得带约束的实例：
import { createBem } from 'bem-constructor';
// 必须统一配置分隔符，否则和PostCSS-BEM等工具不兼容
const bem = createBem({ element: '__', modifier: '--' });
// 正确：块名是源头，所有派生都基于它
bem('button')(); // → 'button'
bem('button')('icon'); // → 'button__icon'
bem('button')({ modifier: 'primary' }); // → 'button button--primary'
bem('button')('icon', { modifier: { large: true, disabled: false } }); // → 'button__icon button__icon--large'
注意：bem('button')返回的是一个函数，不是字符串；只有再调用它，才真正生成类名。这种柯里化设计强制你把块名作为唯一入口，避免btn、button、Button混用。
和CSS Modules / SSR配合时最常踩的坑
类名生成和CSS文件内容必须严格对齐，否则样式丢失：
- 用了
postcss-bem重写选择器，但JS里用createBem({ element: '_' })，结果生成button_icon，而CSS里是.button__icon——完全不匹配 - 在CSS Modules中写了
import styles from './Button.module.css'，却在JS里直接写styles.button__icon，这依赖Webpack生成的哈希类名（如Button_button__abc123），和BEM语义无关，也破坏了跨环境一致性 - SSR时服务端用
require('bem-constructor')创建实例，客户端又import一次，两个实例缓存不同、哈希行为不一致，导致水合失败或首屏样式错乱
关键点就一个：所有环境（服务端、客户端、构建时）必须共享同一个bem实例，通常挂到全局或通过DI容器注入，而不是各自createBem。
真正容易被忽略的是修饰符的布尔逻辑处理——bem默认只保留true值，但如果你传入{ loading: 'pending' }这种非布尔值，它不会报错也不会过滤，而是原样拼进类名，变成button--loading-pending，而你的CSS里可能只写了.button--loading，样式就失效了。这种问题不会抛异常，只静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
