html语义错误会破坏css-in-js动态样式逻辑，如用替代导致props驱动样式失效，缺失role/aria属性使主题切换后可访问性样式不可测，rtl样式静默失效，且测试通过但线上仍出问题。
HTML 代码质量本身不直接决定 CSS-in-JS 的行为，但结构缺陷会放大 CSS-in-JS 的隐患——比如语义错误导致 data-testid 或 className 无法稳定定位，让 styled-components 的条件样式失效；又或者缺少 role 和 aria-* 属性，使主题切换后的可访问性样式完全不可测。
HTML 语义错误如何破坏 CSS-in-JS 的动态样式逻辑
CSS-in-JS 库（如 styled-components 或 @emotion/react）常依赖 props 或 theme 状态生成样式，但这些逻辑往往建立在 DOM 结构“可信”的前提下。一旦 HTML 结构出错，样式逻辑就可能被绕过或误触发。
-
<button></button>被写成<div onclick="...">：会导致 <code>asChild、variant等 prop 驱动的样式规则不生效，因为 CSS-in-JS 组件内部通常只对原生语义元素做样式增强 - 用
<span></span>包裹整个卡片区域并加onClick：React 测试中screen.getByRole('button')查不到节点，快照测试里也缺失role="button"，导致条件样式（如isDisabled）无法被验证 - 遗漏
lang属性或dir属性：RTL 主题切换时，css`margin-inline-start: 1rem`这类逻辑样式可能不触发，但错误不会报在 JS 层，而是静默失效 - 每个组件渲染后，用
screen.getByRole()或screen.getByLabelText()显式校验语义角色，而不是只查getByTestId - 对使用
asChild或asprop 的组件（如Button as="a"），测试中需验证最终 DOM 节点是<a></a>且含href属性，而非仅检查 class 是否存在 - 涉及表单控件的组件（如
Input），必须断言其包裹了<label></label>或设置了aria-labelledby，否则 theme 中的 focus outline 样式在屏幕阅读器下无效 -
react-axe或@axe-core/react可在开发时运行无障碍扫描，但它不会告诉你theme.colors.primary在<article></article>里没生效——只报 “color contrast insufficient”，根源其实是该元素本该用<section></section>语义化包裹，却用了无意义的<div> <li>Vite / Webpack 构建阶段无法校验 <code>css`display: ${props.flex ? 'flex' : 'block'}`是否被包裹在合法容器中，而浏览器渲染时 flex 容器若嵌套在<p></p>内会被自动修正，导致样式表现与预期不符 - CI 中跑 Jest 快照时，如果快照文件里存的是带
data-styled属性的 HTML，而团队成员本地 Node 版本不同，styled-components生成的 hash 类名可能变化，造成误报——这不是 HTML 问题，却是协同链路里最易被忽略的“假失败”
CSS-in-JS 测试中必须校验的 HTML 结构点
快照测试和 Testing Library 测试不能只看 class 名或内联 style，必须同步断言 HTML 基础结构是否合规，否则测试通过但线上仍出问题。
HTML 与 CSS-in-JS 协同时的构建时检查盲区
ESLint 和 Stylelint 能抓 JS 逻辑和 CSS 写法，但对 HTML 结构 + CSS-in-JS 行为的组合问题基本无感。这类问题往往只在 E2E 或手动测试中暴露。
真正难处理的不是某处 div 没换 main，而是当 HTML 结构勉强能用、CSS-in-JS 样式也能渲染、测试还全绿时，你根本意识不到 theme 切换后键盘焦点顺序已经错乱，或者打印样式里所有 display: none 都因父级语义缺失被浏览器忽略。这种协同缝隙，比单点错误更耗调试时间。
