bem类名断言是最稳定可复用的css自动化测试方式，因其不依赖dom结构、computedstyle或构建压缩，仅需验证类名存在即可；应优先用classlist.contains而非getcomputedstyle，并在编译阶段用postcss-bem-linter拦截非法写法，同时显式覆盖modifier组合状态。
因为BEM类名把样式归属固化在字符串里，测试时不用猜“这个样式属于哪个组件”，直接查.button__icon--hidden是否存在即可——这是目前最稳定、可复现率100%的CSS单元测试方式。
为什么classList.contains比getComputedStyle更可靠
运行时验证Modifier是否生效，优先检查类名存在性，而不是读取计算后样式值。原因很实在：
-
getComputedStyle(el).opacity可能返回"0.5"或".5"，浏览器压缩行为不一致，正则匹配容易翻车 - CSS变量未被JS设置时，
getComputedStyle返回空字符串或默认值，和真实渲染对不上 - 继承、媒体查询激活状态、层叠权重都会干扰
computedStyle结果，CI里经常本地能过、CI挂掉 -
el.classList.contains('button--disabled')是确定性判断，和构建产物完全一致，不依赖DOM结构或渲染引擎
Modifier必须依附Block/Element，不能单独存在
测试脚本失败，八成是因为写了cy.get('.button--disabled')却没意识到真实DOM是<button class="button button--disabled"></button>。BEM要求修饰符必须有宿主：
-
.button--disabled合法，前提是.button同时存在 -
.button__icon--hidden合法，但.icon--hidden或.hidden属于非法全局类，破坏模块边界 - Jest + RTL中应写
screen.getByRole('button').classList.contains('button--disabled')，而不是只查修饰符 - Cypress中用
cy.get('button').should('have.class', 'button--disabled')，避免.should('have.css', 'opacity', '0.5')
PostCSS插件能在编译阶段卡住不可测写法
很多“看似能测”的BEM代码，其实从源头就破坏了测试前提。这类问题必须在提交前拦截：
-
postcss-bem-linter可拒绝.button--primary--disabled（多--叠加，语义模糊） - 拒绝
.modal--open .modal__content（含空格，退化为后代选择器，无法被单类名断言覆盖） - 拒绝
.card__title--disabled（状态应作用于Block根.card--disabled，而非Element） - 配置
ignoreSelectors: ["/^\..+:(hover|focus)/"]，否则伪类会被误报，但&:hover本身就不该出现在BEM组件库中
真正难测的不是类名是否存在，而是Modifier之间是否互斥——比如.button--loading和.button--disabled同时加在元素上时，样式覆盖逻辑是否按预期工作。这需要显式构造组合状态测试，而不是只验证单个类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
