bem 是大型响应式项目样式可控的必要结构规范。它通过业务语义化 block 名、单类名选择器、禁止空格嵌套、明确 modifier 状态等规则，杜绝样式连锁崩坏、响应式逻辑分散、dom 变更失效及浏览器匹配低效等问题。
因为不强制用 BEM，大型响应式项目里改一个 padding 就会触发连锁样式崩坏——这不是概率问题，是结构失控的必然结果。
响应式逻辑散落在十几个文件里，根本没法收敛
常见错误现象：is-mobile 类被随手加在按钮、弹窗、表单上，最后变成全局开关；@media 规则分散在 header.css、card.scss、common.css 里，改个断点要 grep -r "min-width" 半小时。
- 所有响应式变更必须绑定到明确的 BEM 类，比如
product-card--stacked（整块结构切换）或button__icon--right（仅元素自身微调） - 禁止写
.product-card .price配合媒体查询——这种选择器一挪 DOM 就失效，且无法被stylelint-selector-bem-pattern拦截 -
@media块内只允许出现一个 BEM 类选择器，不许嵌套，不许带空格
类名不回答“属于谁、是什么、当前什么状态”，人眼就得多点三次 DevTools
比如看到 .logo，你得先切到 Elements 面板找父级，再切到 Styles 看来源，再切到 Sources 查定义位置；而 header__logo--dark 一眼就知道：这是 header 块里的 logo 元素，启用 dark 变体。
- Block 名必须业务语义化：
user-card✅，box❌；search-form✅，form❌ - Element 不能脱离 Block 存在：
user-card__avatar合规，user-card__content__name违规（BEM 不允许双下划线嵌套） - Modifier 描述稳定状态：
button--primary✅，button--width-200px❌（值塞进类名，换单位就得新增类）
浏览器匹配慢 + 构建工具难 tree-shaking，本质是选择器写法错了
BEM 的性能优势不是来自名字长，而是单类名选择器一次哈希查找；.header .logo 这种写法会让浏览器反复向上遍历父级，DOM 越深越卡。
- 构建后用
grep -r "\.[a-z]\+ \.[a-z]" dist/快速揪出残留的空格选择器 - Sass 中写
.card { &__title { } }是安全的，但.card { & .card__subtitle { } }就会编译出带空格的选择器 - BEM 不解决加载顺序问题——
.card__title--large和.card__title--small冲突，不是命名错，是 CSS 引入顺序或层叠权重没管住
最容易被忽略的是：BEM 只管名字，不管谁覆盖谁。修饰符叠加、状态类混用、CSS 文件引入顺序混乱——这些才是大型项目真正卡死的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
