CSS变量需带单位声明，calc()和clamp()支持动态计算但有类型与兼容性限制，伪类选择器可零JS响应状态，JS注入样式推荐insertRule()以保安全与性能。
CSS 变量（:root 和 var()）怎么用才不踩坑
CSS 变量本身不“动态”，但配合 JavaScript 修改 :root 或元素的 style 属性，就能实时生效。关键点是：变量必须在声明时带单位（如 --gap: 12px），不能写成 --gap: 12 后再拼单位——var(--gap) * 2 在 CSS 里不合法，会直接失效。
常见错误是把变量当 JS 变量用：calc(var(--size) + 10px) 没问题，但 calc(var(--size) + 10) 会报错，因为类型不匹配。
- 变量作用域优先级：内联
style> 局部div { --color: red; }>:root - 修改后无需重排样式表，浏览器自动重绘，性能友好
- 调试技巧：在 DevTools 的 Styles 面板里右键变量名可“Reveal in
:root”或“Edit value”
calc() 和 clamp() 是真·动态计算函数
calc() 支持加减乘除和混合单位（100vw - 2rem），但注意括号必须、运算符前后要有空格；clamp(MIN, VAL, MAX) 是响应式神器，比如 font-size: clamp(1rem, 2.5vw, 1.5rem)，它不是 JS 函数，纯 CSS 运行，不触发重排。
容易忽略的是 clamp() 的三个参数必须同类型（全为长度、全为角度等），且 MIN ≤ MAX，否则整条声明被丢弃——DevTools 不报错，只静默失效。
立即学习“前端免费学习笔记（深入）”；
-
calc(100% / 3 - 2px)可用于栅格间隙补偿，比固定 margin 更健壮 -
clamp()在 Safari 13.4+ 才完全支持，旧版本需降级为min()/max()组合（兼容性差，慎用） - 不要在
calc()里嵌套var()再套calc()，层级一深就难维护，先算好中间值存成新变量
伪类和属性选择器也能“动态”响应状态
很多人忘了 CSS 本就有动态能力：[data-theme="dark"] .btn、:hover、:focus-visible、:has(> .error)（新版支持）这些都不是 JS 触发的，而是浏览器原生响应 DOM 状态或用户行为。
重点在于：这类“动态”零 JS 成本，但依赖结构可控。比如用 [data-color-mode] 切换主题，比一堆 JS classList.toggle() 更轻量、更利于 SSR。
- 避免过度依赖
:has()做复杂逻辑，目前仅 Chromium 105+ 和 Safari 15.4+ 支持，Firefox 仍实验中 -
:is()和:where()可简化多状态选择器，但注意:where()不影响优先级，适合覆盖默认样式 - 属性选择器值含空格或特殊字符时，要用引号：
[data-state="on hover"]
JS 注入样式时，CSSStyleSheet.insertRule() 比 innerHTML 更干净
需要运行时生成大量规则（比如主题色衍生出 20 个按钮变体），直接拼字符串塞 容易 XSS 和维护困难。用 CSSStyleSheet.insertRule() 可精确控制、支持撤销（deleteRule()），且不触发全局重排。
典型场景：用户上传主色 HEX，JS 实时生成 --primary-50 到 --primary-900 的渐变变量，并注入对应文本/背景规则。
- 必须先获取
document.styleSheets[0].cssRules或创建新 sheet：const sheet = new CSSStyleSheet() - 规则字符串要完整，包括大括号：
sheet.insertRule('.card { border-color: var(--primary-300); }', 0) - IE 完全不支持，若需兼容，降级为动态创建
标签 +textContent
CSS 动态样式的边界其实很清晰：变量和函数解决“值变化”，选择器解决“条件响应”，JS 注入解决“规则生成”。三者混用时，最容易被忽略的是优先级叠加和降级 fallback——比如 clamp() 失效时，得有 font-size: 1.5rem 保底，而不是指望它自动兜底。
