-
什么是CSS颜色分层，不是简单写几个--color-primary颜色分层本质是把颜色按语义+使用场景切开，而不是按色值归类。比如--color-primary不能只代表“蓝色”，它得明确回答：这个蓝用在按钮上？还是标题文字？还是禁用态背景？同一色相在不同语境下亮度、对比度、透明度都该不同。很多人直接定义--blue-500然后到处用，结果在深色模式下文字看不见，或在按钮上和背景对比不足——问题不在变量名，而在没分层。必须拆开的三层：基础色、语义色、场景色基础色只存原始色值（如#2563eb），不
-
用absolute+负top/right易错位，因负值硬编码且受父容器内边距、缩放、transform等影响；必须给父元素设position:relative，并用transform:translate(50%,-50%)精准锚定右上角，配合z-index≥99和避免overflow:hidden。
-
watch返回的stop函数必须手动调用以防止内存泄漏，不同于选项式API的自动清理；推荐在onUnmounted中调用，watchEffect同理；动态场景需先停止旧监听再启动新监听。
-
Props不能直接解构赋值，因其会切断与Vue响应式系统的连接，导致值无法响应更新；应始终通过props.xxx访问，或用toRefs保持响应性。
-
基础组件Props应用TypeScript接口明确定义，命名统一为[ComponentName]Props，必填不加?、可选显式标注，禁用any/Object，按需拆解传入字段，配运行时校验与默认值，并预留扩展字段如extraClass、ariaLabel等。
-
用watchEffect实现视频播放自动存档，关键在于通过ref同步currentTime并在watchEffect中读取以触发依赖追踪，结合onInvalidate清理定时器、节流存档、AbortController中止旧请求、时间戳防竞态及isSaving/saveError状态反馈确保可靠性。
-
Promise.any适用于多CDN场景中“取最快成功响应”，它在任意Promise成功时立即返回结果，忽略失败项；而Promise.race可能因首个失败导致整体失败，Promise.all要求全部成功，均不满足容错与快速加载需求。
-
linear-gradient()方向须用toside-or-corner格式（如tobottom），禁用旧语法top；色标需手动设百分比或像素值控制过渡节奏；透明色需配合background-color和border-style:solid才能正常显示。
-
手风琴效果不必强制使用details元素，但details+summary是最稳妥方案，原生支持展开/收起、键盘操作与屏幕阅读器语义，无需JS；多开为默认行为，单开需少量JS实现；动画应避免max-height:none，推荐设固定较大值（如600px）。
-
HTML和CSS无round函数，必须用JavaScript实现；Math.round()仅支持整数四舍五入且负数按向正无穷取整，保留小数需手动缩放，严格四舍五入应避免toFixed()的银行家舍入。
-
TreeShaking插件通过静态AST分析识别未被import引用的ES模块顶层导出（named/default），构建引用图并剔除未存活声明，需保留副作用代码、递归处理依赖链，且高度依赖代码符合ESM与strictmode规范。
-
使用<img>引入外部SVG时currentColor失效，因其独立文档上下文无法继承父级颜色；解决方法为内联SVG或用mask-image/background-image配合单色SVG。
-
用HTML语义化结构（如dl）+CSS响应式排版（clamp、Gridalign-items:end、等宽字体）实现静态统计数字区，JS仅负责安全格式化（toLocaleString、空值处理）与可选轻量动画。
-
<animate>在现代浏览器中已废弃，Chrome102+、Firefox86+、Safari16.4+移除SMIL动画支持，因其与CSS动画和WebAnimationsAPI重叠且存在安全性能隐患；应改用CSS@keyframes或WebAnimationsAPI替代。
-
能，但仅当datetime值符合ISO8601格式且被搜索引擎、屏幕阅读器或JS正确解析时才有效；浏览器不自动转换，错误格式（如中文、缩写时区）会导致NaN或InvalidDate。
