BEM类名必须带block前缀，因其是所有权声明，明确“这是谁的avatar”，避免样式跨模块泄漏；禁止嵌套选择器以保障性能与DOM解耦；修饰符必须用--而非-或_，确保语义清晰、工具可识别、状态可枚举。
因为 BEM 不是“更好看的命名”，而是把协作中必然发生的样式冲突，提前变成可 grep、可 lint、可归属的字符串问题——名字长一点，人少 debug 一小时。
为什么 BEM 类名必须带 block 前缀（如 user-card__avatar）
不带前缀的 avatar 或 card__avatar 在百人项目里等于没命名：它不回答“这是谁的 avatar？”
- 真实场景下，
header__logo和modal__logo可能用同一套 SVG，但尺寸/颜色/交互完全不同；没有 block 前缀，CSS 就只能靠父选择器硬锁，结果 HTML 里加个<section>就失效 - 常见错误：
.logo img这种规则会意外命中所有 logo，连邮件模板里的<img class="logo">都被改掉 - block 前缀本质是所有权声明：每个类名自带模块上下文，
grep user-card就能定位到全部相关样式和模板片段
为什么 BEM 禁止嵌套选择器（如 .card .card__title）
浏览器匹配 .card .card__title 是从右往左回溯：先找所有 card__title 元素，再逐个查父级是否含 card 类——DOM 越深、元素越多，Recalculate Style 时间越长。
Golang Google Wire
下载
在 Go 中使用 google/wire 实现编译时依赖注入——wire.NewSet、wire.Build、wire.Bind（接口→实现）、wire.Struct、wire.Value、wire.Interface
-
.card__title是单类名，直接哈希查找，性能差可达 4 倍以上（尤其在低端 Android 设备上） - 更关键的是维护成本：
.card .card__title暗示“这个 title 必须在 card 下”，但组件复用时，它可能被塞进 SSR 直出的 Java 模板里，结构一变样式就崩 - 实操建议：
• Sass 中禁用&嵌套生成空格选择器，例如避免写.card { &__title { } }
• 构建后用grep -r "\.[a-z]\+ \.[a-z]" dist/扫描残留空格
• DevTools Elements → Styles 面板里点开任意规则，确认选择器不含空格、不带标签名
为什么修饰符必须用 -- 而非 _ 或 -（如 button--primary）
-- 是 BEM 的语义分隔符，不是装饰。它明确告诉团队：“这是 block 或 element 的状态变体”，而非新 block 或视觉工具类。
立即学习“前端免费学习笔记（深入）”；
- 用
button_primary容易和button-icon混淆，也难被stylelint-selector-bem-pattern自动识别 - 用
button-primary则和工具类（如text-center）无法区分，后期 CI 检查失效 - 修饰符绑定具体 Block，比
is-disabled更可靠：它明确表达“这个 button 处于禁用态”，而不是一个可能被误复用的通用状态标记
真正容易被忽略的，是 BEM 要求你为每个视觉单元都明确回答三个问题：“它是不是独立块？”“它是不是某块的固有部分？”“它的变体是否需要被其他模块感知？”——这种思考习惯，比双下划线本身重要得多。
