-
CSS变量需定义在祖先元素（如:root）才能自然继承，子组件用var(--color-primary)直接获取；避免内联样式、scoped样式覆盖或ShadowDOM阻断；fallback用标准颜色值，主题切换优先修改:root变量以避免重排。
-
多个link标签并行加载不必然慢，但默认阻塞渲染且受HTTP/1.1并发限制易串行；HTTP/2下改善但仍建议合并关键CSS、按路由拆分、避免@import、确保CDN正确识别contenthash变更。
-
<tbody>是浏览器分块渲染表格的底层开关，加了它数据行能“边下边出”，提升慢网和SSR首屏速度；必须显式用多个<tbody>包裹数据行（每段50–100行为宜），且须与<thead>、<tfoot>共存并严格按此顺序书写，否则结构不合法、渲染异常或无障碍失效。
-
watch在keep-alive缓存组件中持续触发，因组件未真正卸载；需在onDeactivated中stop、onActivated中重建，或统一用onDeactivated/onUnmounted清理。
-
使用overflow:hidden可隐藏盒子内溢出的内容，适用于文本过长、图片偏移等场景，结合text-overflow:ellipsis可实现文本省略，需注意元素需有明确宽高或BFC，且会同时隐藏所有溢出内容。
-
最常见的原因是父容器未设perspective或卡片未开启3D渲染上下文；需父容器设perspective，卡片加transform-style:preserve-3d，正反面设backface-visibility:hidden并初始化rotateY值。
-
虚拟列表通过仅渲染视口及缓冲区节点、用height占位、滚动时仅更新transform和局部DOM来解决长列表卡顿；需固定行高或缓存高度、精准位置计算与动态挂载/卸载。
-
带参数的LessMixin必须显式声明默认值，否则未传参时编译报错中断；正确写法为在参数后用冒号设默认值、分号分隔，且所有参数均应设默认值以防编译失败。
-
首先通过监听touchstart、touchmove、touchend事件实现手势识别，具体包括滑动、长按、双击和缩放等操作。记录触摸坐标并计算位移与时间差，结合阈值判断手势类型。例如滑动手势需比较起始与结束位置的偏移量，长按通过定时器检测持续触摸，双击判断两次点击间隔与距离，缩放则依据两指间距离变化。示例代码展示了左右滑动检测逻辑：在touchstart记录起点，touchend时计算水平位移，若水平差大于30且垂直差小于50，根据方向输出swipeleft或swiperight。注意事项包括设置pas
-
HTML<inputtype="range">是原生范围滑块，需监听input事件实现实时响应，用valueAsNumber读写数值，并通过min、max、step控制范围与步进。
-
自定义字体不生效主因是误用theme.fontFamily而非extend.fontFamily，导致默认font-sans等丢失；须用@font-face声明本地字体，键名须合法且统一单引号，路径用绝对URL并加font-display:swap。
-
@mixin本身不膨胀体积，滥用@include才导致CSS膨胀；因其是编译期文本替换，每次调用都原样复制整段样式，不合并、不去重，尤其在循环、嵌套或跨组件重复调用时生成大量冗余代码。
-
使用@keyframes统一box-shadow和border-color动画关键帧，结合will-change或translateZ启用硬件加速，通过CSS变量保持颜色一致性，并注意浏览器兼容性与prefers-reduced-motion适配，可解决闪烁、卡顿等问题，确保动画流畅同步。
-
先设置border-collapse:collapse避免双线边框，再统一定义table,th,td的border样式；通过调整边框宽度、颜色和类型（如solid、dashed）美化表格，可单独设置th下边框或外边框突出表头。
-
响应式卡片布局通过CSSGrid和Flexbox结合实现，Grid用minmax(250px,1fr)定义多列自适应外层结构，支持大屏4列、平板2列、手机1列；Flexbox以flex-direction:column管理卡片内部，使图片、文字、按钮纵向排列，其中文字区域设flex:1实现底部对齐，按钮固定底端；配合gap统一间距，并通过媒体查询优化移动端字体、内边距及隐藏非关键元素，提升小屏体验。
