chrome devtools搜review-list__item无结果，主因是js动态拼接类名时引入空格、引号或大小写错误，或构建工具哈希化类名，需通过edit as html验证原始值、用[class*="..."]临时查询，或添加data-test属性兜底。
Chrome DevTools里搜review-list__item却没结果？先查类名是否被动态拼错
常见错误现象：明明写了review-list__item，但Elements面板里看不到这个类——不是DevTools坏了，而是JS拼接时漏了空格或引号。比如React中写className="review-list__item" + (isActive ? " review-list__item--active" : "")，若isActive为false，就会生成review-list__item后面多一个空格，导致浏览器解析为两个类：review-list__item （末尾带空格）和空字符串，实际DOM里根本不存在。
实操建议：
- 在Elements面板里右键元素 → “Edit as HTML”，直接看原始
class属性值，确认有没有多余空格、引号、大小写混用 - 用
document.querySelector('[class*="review-list__item"]')临时测试：只要类名中包含该字符串就命中，能绕过拼写细节，快速验证是否存在 - Vue用户注意
v-bind:class数组写法：['review-list__item', isActive && 'review-list__item--active']比字符串拼接更安全
想高亮所有评分星星，但.review-list__rating .star总失效？别用后代选择器套第三方结构
BEM原则禁止靠DOM层级猜样式归属。.review-list__rating .star这种写法本质是把.star当成review-list__rating的子元素，但真实场景中，星星可能是第三方UI库（如Ant Design）渲染的<span class="ant-rate-star"></span>，它不属于BEM体系，也不受你控制。
实操建议：
- 给第三方组件外层加BEM容器：
<div class="review-list__rating"><rate></rate></div>，测试和样式只操作review-list__rating，不深入Rate内部 - 若必须定制星星样式，用BEM新命名：
review-list__rating-stars，再通过review-list__rating-stars .ant-rate-star局部覆盖，避免污染全局 - 禁用
.review-list__rating > *这类通配后代选择器——它会随第三方组件更新而断裂，且权重过高易引发冲突
点击“展开全部评论”后review-list__more不显示？检查修饰符是否单独使用
常见错误：JS只加了review-list__more--expanded，但没保留基础类review-list__more。BEM规范要求修饰符必须与基础块/元素共存，否则.review-list__more--expanded这条规则根本不会匹配任何元素。
实操建议：
- DOM中必须是
<button class="review-list__more review-list__more--expanded"></button>，而不是仅review-list__more--expanded - CSS里不要写
.review-list__more--expanded { display: block; }，而要写.review-list__more.review-list__more--expanded { display: block; }，显式声明依赖关系 - 自动化测试中用
cypress.get('.review-list__more').should('have.class', 'review-list__more--expanded')，比cypress.get('.review-list__more--expanded')更可靠
线上环境搜不到review-list__header？构建工具可能已哈希化类名
开发环境能搜到，线上却消失，大概率是CSS Modules或Vite的css.experimentalScopedCSS启用了类名哈希。此时真实DOM里是review-list__header_abc123，而非原始名。
实操建议：
- 构建配置中确认是否启用
localsConvention: 'camelCaseOnly'，并改用JS导入：import styles from './ReviewList.module.css';→styles['review-list__header'] - 若无法改构建链路，统一加
data-test属性作为兜底：data-test="review-list-header"，测试和部分调试都走这个路径 - 禁止在生产环境依赖
getComputedStyle()查BEM类名——它返回的是计算值，不反映原始类，也看不到哈希后的真实名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
