SKU选择器Block命名必须为product-sku-selector，确保脱离页面上下文可复用；Element须为一级直系子结构；Modifier分语义型（--）与状态型（is-）；SCSS中必须用@at-root生成BEM类名；HTML中不可漏写基础Block类。
SKU选择器的Block命名必须脱离页面上下文
直接用product-sku-selector，别写detail-page-sku-selector或cart-sku-picker。前者能复用于商品详情页、弹窗、购物车侧边栏、邮件模板预览；后两者绑定具体页面或容器，一旦挪动位置，类名语义就失效，Sass变量映射、stylelint校验、组件搜索全崩。判断标准就一个：这个选择器删掉父级DOM后，是否还能独立渲染和交互？能，就是合格Block。
Element必须是一级直系子结构，禁用嵌套三层
SKU选择器常见结构是规格项（颜色/尺寸）、规格值列表、当前选中态提示、库存状态文案。这些都该是product-sku-selector的直接Element：product-sku-selector__option、product-sku-selector__value-list、product-sku-selector__selected、product-sku-selector__stock。常见错误是顺着DOM写product-sku-selector__option__color——BEM明确禁止__后接第二层__，这等于把HTML层级硬编码进类名，破坏可移植性。如果“颜色”本身需要复用（比如也在筛选面板出现），它就应该抽成独立Block：sku-color，而非作为子元素存在。
Modifier要区分语义型与状态型，避免样式爆炸
修饰符不是随便加的，得分类处理：
• 语义型Modifier用双横线：product-sku-selector--compact、product-sku-selector--vertical，描述组件变体，可静态配置；
• 状态型Modifier统一用is-前缀：is-disabled、is-loading、is-out-of-stock，由JS动态控制，不参与Sass编译逻辑；
• 绝对禁用product-sku-selector__value-list--red这类带颜色的修饰符——品牌色变更时，你得全局搜改，还漏掉JS里手写的el.classList.add('product-sku-selector__value-list--red')。
多个状态叠加时，不要拼成product-sku-selector__value-list--red--disabled，而是分开写product-sku-selector__value-list is-disabled is-red，但注意is-red本身就不该存在，应替换为is-primary或is-highlighted。
SCSS里生成BEM类名必须用@at-root #{&}__xxx
在.product-sku-selector { }块内，所有__和--类名必须提级到根作用域：
• 正确：
.product-sku-selector {<br> @at-root #{&}__option { /* ... */ }<br> @at-root #{&}--compact { /* ... */ }<br>}
• 错误：&__option会编译为.product-sku-selector .product-sku-selector__option（带空格后代选择器），违背BEM扁平化原则；
• 更危险的是在伪类里用：&:hover { &__icon { } } → 编译出非法类名.product-sku-selector:hover__icon，浏览器直接忽略；
• 变量块名也适用：$block: "product-sku-selector"; @at-root #{$block}__stock { }；
• 所有@at-root必须写在Block顶层，不能嵌套在@media或&:focus内部，否则输出顺序不可控，且破坏BEM语义层级。
真实项目中最容易被忽略的，是HTML里漏写基础Block类。比如只写class="product-sku-selector__option"，没同时带上product-sku-selector，那所有依赖Block上下文的样式（如字体继承、容器约束）全部失效，DevTools里根本看不出问题根源——它不是报错，是静默丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
