BEM类名变长是显式声明归属权的必要代价，如product-card__price--discount明确标识所属模块与状态，避免隐式结构依赖和样式污染。
为什么BEM类名变长反而让组件更容易扩展
类名变长不是副作用，而是显式声明“归属权”的代价。当你看到 product-card__price--discount，它明确告诉你：这是 product-card 这个块里的 price 元素，在 discount 状态下要呈现的样式。没有隐含结构依赖，不靠 .card .price 这种选择器猜上下文。
常见错误现象：改一个 .btn 样式，结果弹窗、表单、侧边栏的按钮全变了色；搜索 btn--loading 却发现它被定义在 modal.css 里，和 modal 没半点关系。
- 块名（如
product-card）必须业务语义化，禁用container、wrap这类泛词 - 元素名（如
product-card__image）不能脱离块独立存在，__image单独写样式是反模式 - 修饰符（如
--discount）只描述状态，不描述位置或视觉细节（不用--top-left，改用--align-top）
React组件中怎么避免BEM类名拼接失控
手写 className={`product-card ${isFeatured ? 'product-card--featured' : ''} ${isLoading ? 'product-card--loading' : ''}`} 很快会变成维护噩梦。关键不是“要不要封装”，而是封装后是否还能一眼看出块名源头。
使用场景：ProductCard 组件需支持 featured、loading、error 三种状态，内部有 title、price、actions 三个子区域。
立即学习“前端免费学习笔记（深入）”；
- 根元素必须带完整块名：
className="product-card" - 子元素统一前缀：
product-card__title、product-card__price，禁止product-card__content__title - 推荐用轻量函数封装：
bem('product-card')('price', { featured: true, loading: false })→ 输出"product-card product-card__price product-card--featured" - 禁止混用类名来源：不要同时写
product-card__button和button—— 后者说明你漏抽了一个独立的button块
多层级UI嵌套时，BEM怎么防止命名爆炸
出现 card__body__list__item__text 这种类名，不是BEM太啰嗦，而是组件职责没划清。BEM要求每个 __ 只能连接块与它的直接子元素，不支持“子元素的子元素”。
常见错误现象：把导航菜单写成 header__nav__item__link，结果 header 改版后整个 nav 样式全崩；或为复用列表逻辑，在多个 block 下重复写 __list__item。
- 判断标准：这个 UI 片段会不会在别处复用？是否拥有自己的逻辑或样式边界？如果是，就该提升为独立 Block（如
nav、list） - 正确写法：
<div class="card"><div class="card__body"><ul class="list"><li class="list__item"> - 需要表达上下文影响时，用 Modifier 而非深层 Element：
button--in-card表示按钮在卡片内尺寸收缩，而不是card__body__button - SCSS 中禁用嵌套写法：
&__body { &__list { ... } }—— 它生成的选择器仍依赖 DOM 结构，且 IDE 难以跳转到list__item定义处
BEM目录结构和文件命名怎么守住模块边界
目录不是为了好看，是让“这个样式属于谁”在文件系统里也一目了然。BEM 的约束力一半来自命名，另一半来自物理隔离。
常见错误现象：在 /components/card/ 目录下发现 card.css 里写了 .user-profile__avatar；或 button.css 文件名和实际类名 primary-button 对不上。
- 每个 Block 对应一个一级目录：
/components/product-card/ - 目录内只放该 Block 的核心文件：
product-card.css、product-card.js、product-card.test.js - 文件名必须与 Block 名一致：
product-card.css→.product-card，禁用card.css→.product-card这类错位 - 子组件必须独立成目录：
/components/avatar/，不能塞进/components/product-card/avatar/ - CI 阶段用
stylelint-selector-bem-pattern校验类名，用grep -r "class=\"[a-z]\+__" src/快速定位未升级的老代码
真正难的不是写出 block__element--modifier，而是在加一个 tooltip 时，本能地新建 /components/tooltip/，而不是往 modal.css 里塞 .modal__tooltip —— 这需要目录契约、构建检查，和最初几个模块的示范性实现。
