bem命名禁止使用--red等视觉修饰符，因其违背语义化原则；必须用--active等表达状态或角色的修饰符，确保可维护性、主题复用性及与js交互的一致性。
为什么BEM命名里不能写header__title--red？
因为--red不是语义化的修饰符，而是视觉描述。BEM要求修饰符表达“状态”或“角色”，比如--active、--disabled、--large——这些能被JavaScript读取并响应，也能在不同主题下复用。一旦用--red，换暗色模式就得全量替换，还容易和设计系统里的色彩Token冲突。
-
--red这类命名会让CSS失去可维护性：改个品牌色要搜全项目，而不是只改colors.css - 真实场景中，按钮的
--primary比--blue更安全——它不绑定具体颜色值，只表达意图 - 如果真需要快速调试，用浏览器开发者工具临时加
style="color: red"，别污染BEM命名空间
block__element--modifier中间能嵌套层级吗？
不能。BEM明确规定层级扁平化：menu__item__icon是错的，正确写法是menu__item-icon。嵌套写法会破坏块的封装性，也导致选择器权重失控——比如.menu__item .menu__item__icon比.menu__item-icon多一层依赖，JS操作时也容易误判DOM结构。
- 所有
__连接的元素，必须直接属于同一个block容器，不能跨层提取 - 如果一个组件内部有子组件（比如
card里用了button），就该独立成button块，而不是写成card__button - 例外情况只有
block--modifier__element这种组合，但--modifier必须作用于block本身，不能跳到元素上
怎么处理响应式场景下的BEM修饰符？
用--mobile、--tablet这类修饰符是反模式。BEM不负责媒体查询逻辑，它只定义结构关系。响应式应该通过CSS容器查询（@container）或父级类控制，比如给layout加layout--sidebar-collapsed，再让layout__main响应这个状态。
- 避免
button--mobile-fullwidth：宽度应由布局上下文决定，而非按钮自身 - 真正需要区分设备行为时，用
--touch或--keyboard这类交互维度修饰符，比--mobile更稳定 - 如果必须做断点适配，把媒体查询写在单独文件（如
responsive.css），用.block--responsive-enabled触发，不侵入BEM命名
Vue/React里用scoped或css modules还要BEM吗？
要，而且更关键。组件级样式隔离解决的是全局污染问题，BEM解决的是组件内部结构可读性与协作一致性。没有BEM，scoped生成的.v-1234567 .v-7654321根本没法 debug；CSS Modules的styles.button也不如button--primary直观。
- 在Vue单文件组件里，建议写
class="button button--primary"，而不是只靠:class="styles.primary" - React中若用Emotion或Styled Components，仍可用BEM作为
className前缀，方便DevTools里一眼定位 - 最易忽略的一点：BEM命名要和组件Props对齐。比如组件接受
size="large"，对应类名就该是--large，别写成--big或--lg
修饰符不是后缀补丁，它是组件契约的一部分——写错一个--，下游就可能多写三行条件判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
