传统命名一上规模就失控，因泛化类名如.header、.btn在多模块中重复导致样式污染，调试难定位，依赖HTML结构易失效，状态管理混乱；BEM通过block__element--modifier将归属、角色、状态显式编码进类名，实现语义隔离与可维护性。
传统命名为什么一上规模就失控
传统写法像 .header、.btn 看似简洁，但项目里多个模块都可能用同样名字：用户页有个 .btn，弹窗里也有个 .btn，结果改一处样式，另一处跟着变色或错位。更麻烦的是，调试时搜 btn 会命中十几处 CSS，根本分不清哪个是当前组件的。
常见错误现象：.sidebar .nav .item.active:hover 这类高权重选择器越堆越多，最后不得不用 !important 覆盖，或者靠 DOM 层级“猜”样式生效逻辑——HTML 一动，样式就断。
- 类名无归属：不知道
.title是卡片标题还是文章标题 - 依赖结构：样式靠父容器限定，
.card .title一旦卡片嵌套进新容器就失效 - 状态难管理：
.is-loading这种通用类，出现在按钮、列表、表单里，谁在用、是否冲突全靠人记
BEM如何用类名自带上下文替代层级依赖
BEM 把“这个东西属于谁、是什么、现在什么样”全写进类名里，比如 search-form__submit-button--primary：
-
search-form是 Block，表示独立模块 -
__submit-button是 Element，必须依附于 Block，不能单独存在 -
--primary是 Modifier，只修饰 Block 或 Element，不跨层
它强制禁止 .search-form .submit-button 这种嵌套写法，所有规则都是单类名，权重恒为 10。调试时直接搜 search-form__submit-button 就能定位到唯一文件，HTML 结构怎么变都不影响样式生效。
性能上没负担，Gzip 压缩后长名体积差异可忽略；真正代价是人工拼写成本——大小写、连字符、双下划线一个错，就等于漏写一条样式规则。
为什么 BEM 类名越长反而越容易协作
长不是为了炫技，是把原本藏在 HTML 结构、CSS 层级、团队口头约定里的隐含逻辑，变成可搜索、可校验、可自动化处理的显式信息。
- 新人看
product-card__price--discounted，不用翻文档就知道这是商品卡片里的折扣价 - VS Code 插件能自动补全
__和--，减少手误 - 配合
clsx或自定义 BEM 工厂函数，JS 中动态类名不再靠字符串拼接：bem('product-card', { discounted: true }) - 构建工具（如
postcss-bem）可校验类名是否符合规范，CI 流程里拦截.card-title这种非 BEM 写法
容易被忽略的一点：BEM 不解决“要不要加边框”这种设计决策问题，它只确保“加边框的代码一定落在 card__content--bordered 这个类里”，让修改、复用、排查都有确定路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
