BEM命名规范通过block__element--modifier三层语义、文件与块名严格一一对应、修饰符绑定行为状态、禁止跨文件定义同一block样式，提升新人定位效率与代码可维护性。
新人打开CSS文件第一眼就能定位组件作用域
因为BEM类名自带三层语义：block__element--modifier，不依赖HTML结构或JS逻辑就能判断样式归属。比如看到form-field__input--disabled，立刻知道这是表单字段模块下的输入框元素，当前处于禁用状态——不需要翻index.html找父容器，也不用查FormField.vue看props传了什么。
文件组织与命名严格一一对应
每个BEM块必须独占一个CSS文件，且文件名和块名完全一致。例如button.css里只允许出现button、button__icon、button--primary等类名。这种硬性约束带来两个直接好处：
- 新人在IDE里按文件名搜索，
ctrl+click跳转即见全部样式逻辑，无须全局grep - 团队无需口头约定“按钮样式在
common.scss第127行”，文件系统本身就成了导航地图
修饰符命名强制绑定行为而非外观
新人最容易写的错是user-card__avatar--small——--small是尺寸，不是状态，它无法表达“何时该小”。BEM要求修饰符必须关联可触发的行为或明确的业务状态，比如：
-
user-card--compact（紧凑模式，由用户设置触发） -
user-card__avatar--loading（头像加载中，由JS控制class切换）
这样新人在写classList.toggle()时，目标类名天然具备上下文，不会写出btn-red-big-hover这类无法维护的组合名。
禁止跨文件定义同一block的样式
老项目常见陷阱：按钮样式分散在base.css、ui-kit.css、profile-page.css里。BEM明令禁止这种做法，所有button相关样式只能存在于button.css中。这意味着：
- 新人修改按钮圆角，不用担心改了
button.css却漏掉profile-page.css里的覆盖规则 - 删除废弃组件时，删掉
button.css即可，不会残留幽灵样式影响其他页面
真正难的是坚持——当产品经理临时加一句“首页按钮要加个脉冲动画”，别把它塞进home.css，而是去button.css里补button--pulsing，哪怕只被用一次。这个动作本身就在训练新人的模块边界意识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
