BEM 通过长类名解决语义模糊与定位困难问题：user-profile__avatar--loading 明确标识归属、元素与状态，支持跨文件精准搜索、权重稳定、命名空间隔离及组件职责清晰。
因为类名长度不是问题，语义模糊和定位困难才是真瓶颈——BEM 把“谁的、什么、什么状态”全塞进名字里，换来的是可搜索、可预测、不依赖 DOM 结构的样式控制能力。
长类名在调试时反而更快定位
看到 user-profile__avatar--loading，不用打开 HTML 就知道它属于 user-profile 组件、是 avatar 元素、处于 loading 状态；搜这个字符串就能精准命中样式、模板、JS 逻辑三处代码。而 .avatar 这种泛名，在中大型项目里可能散落在十几个文件中，靠上下文猜、靠 DevTools 逐层点开，效率断崖式下降。
- 浏览器 DevTools 的 Elements → Computed 面板里，单类名选择器（如
.user-profile__avatar--loading）直接高亮匹配规则；带空格的嵌套选择器（如.user-profile .avatar）得回溯父节点，DOM 深了就卡 - Gzip 对重复前缀（如
user-profile__）压缩效率极高，实际传输体积增加可忽略 - 编辑器支持正则高亮后，
__和--成为视觉锚点，人眼能秒拆 block/element/modifier
长类名换来了 CSS 选择器权重稳定
BEM 强制只用单类名，所有规则权重恒为 10。没有 .sidebar .nav .item.active:hover 这种权重堆叠，也杜绝了 !important 滥用和覆盖战。
- 传统写法中，为了覆盖某个按钮样式，容易写出
.page-header .toolbar .btn--primary，一旦结构微调，整条链就断 - BEM 下，
.btn--primary独立生效，挪到 modal 里、抽成独立组件、甚至改用<div> 替代 <code><button></button>，只要类名在，样式就不丢 - 微前端或多团队并行时，
payment-button__icon--disabled天然带命名空间，不会和宿主项目的.icon冲突 - 反例：
search-form__input-field--has-error→ 应拆出form-field新 block，search-form只管布局与上下文 - 状态别分散到每个元素：
dashboard__header--loading+dashboard__chart--loading→ 改为dashboard--is-loading，用 CSS 选择器批量控制子元素 - 命名优先功能而非位置：
price-tag✔️，product-card__price-tag❌——后者暴露了它被谁包含，违背“自描述”原则
长类名其实是组件职责清晰的外显
类名一写就超长，往往不是 BEM 的锅，而是组件边界没划清——把本该独立的模块硬塞进一个 block 里，__ 和 -- 只能越堆越多。
立即学习“前端免费学习笔记（深入）”；
真正难的不是接受长类名，而是在每次敲下 __ 前，停下来问一句：这个东西，真的属于它上面那个 block 吗？还是它自己就该是个 block？
