组件根类名必须是块名且不可变形，如button组件对外暴露的根类名只能是全小写中划线格式的“button”，须与目录名/components/button/严格一致；元素和修饰符必须绑定宿主，禁止跨块选择器或字符串拼接，所有样式必须由BEM类名驱动。
组件根类名必须是块名，且不可变形
UI组件库的CSS API起点就是块名，它不是“随便起个名”，而是整个组件的唯一标识。比如button组件，对外暴露的根类名只能是button（全小写、中划线），不能是btn或ui-button——后者属于可配置前缀，不是API本身。
常见错误现象：Button组件导出class="BtnPrimary"，导致设计师在Figma中标注button--primary却找不到对应代码；或CI检查时因src/components/Button/Button.css里用了.Btn被直接拒绝。
- 块名必须与目录名严格一致：
/components/button/→ 只能用button作为根类名 - 前缀（如
ui-）应通过构建时参数注入，而非硬编码进源码，否则ui-button__icon就不再是button的子元素，而是新块 - 禁止用大小写或驼峰变体：React中
className={styles.button}没问题，但styles.Button或styles['button-primary']会破坏grep可查性
元素和修饰符必须绑定宿主，不能独立存在
BEM的__和--不是装饰符，是语义契约。button__icon不是“按钮里的图标样式”，而是“仅当父节点有button类时才生效的图标样式”；button--loading也不是“加载态按钮”，而是“这个button当前处于loading状态”。
典型翻车点：class="button--loading"单独出现，没有button类；或button__icon--large被误写成button--icon-large——后者浏览器会匹配class="button button--icon-large"，但你要改的其实是图标尺寸。
-
button__icon必须和button共存于同一元素或其后代，不能脱离上下文使用 -
button--disabled必须和button在同一class属性里：class="button button--disabled"✅，class="button--disabled"❌ - 元素修饰符合法：
button__text--ellipsis；块修饰符+元素组合非法：button--primary__icon（BEM解析器忽略）
禁止跨块选择器，所有样式必须由BEM类名驱动
哪怕视觉上一个input嵌在form-field里，也不能写.form-field .input——这等于放弃BEM的作用域隔离能力，让样式依赖DOM结构，而非语义归属。
常见错误现象：为了“复用”某段CSS，把.card .title写进card.css，结果user-card__title被意外覆盖；或用&.is-open > .menu__item这种非&__/&--嵌套，在stylelint下直接报错。
- 所有样式必须基于BEM类名：只允许
.card__title、.card__title--truncate，禁用.card .title或.card > .title - 第三方组件集成时，用命名空间包裹而非后代选择器：
.myapp-date-picker .date-picker__input✅，.myapp-date-picker.date-picker__input❌（类名拼接错误） - SCSS中只允许
&__element和&--modifier，& > span或&.active全部禁用
动态类名生成必须保留BEM层级，不能字符串拼接
JS里手写className={`${block}__${elem} ${block}--${mod}`}看似灵活，实则极易断层：拼错双下划线、漏掉根块名、修饰符条件分支遗漏——这些错误不会报错，但会导致样式不生效或污染其他组件。
真实场景中，button组件可能同时有size、theme、loading三个prop，手动拼接button button--primary button__icon button__icon--left button--large几乎必然出错。
- 必须封装工具函数，如
bem('button')('icon', { left: true, large: true })，确保输出始终带根块名 - 禁止在JSX里写深层嵌套：
card__body__title❌，应为card__title并确保其直属于card作用域 - 使用
clsx时，优先用对象语法：clsx('button', { 'button--primary': isPrimary, 'button__icon': hasIcon })，避免引号内含连字符引发转义问题
BEM的CSS API不是写得越多越强，而是每一条类名都必须能回答三个问题：它属于哪个块？它是块的哪部分？它当前是什么状态。一旦某个__或--脱离了这个三角关系，它就不再是API，只是偶然生效的字符串。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
