-
position:absolute时margin不失效，但参考系变为定位上下文；relative定位下margin与top叠加易致布局“飘忽”；fixed元素用margin易引发溢出；flex/grid中应优先使用justify-content、gap等现代布局属性而非margin定位。
-
发布订阅模式通过事件总线实现组件间解耦，核心是发布者与订阅者不直接通信，而是通过中心化的调度器传递消息，提升代码模块化与可维护性。
-
HTML的data-theme仅作状态标记，主题切换需同步更新data-theme属性和CSS变量，否则样式不响应；必须用JS触发重绘，localStoragealone无效。
-
JavaScript中有6个falsy值：false、0、-0、""、null、undefined、NaN；在条件判断中，这些值会被自动转为false，其余均为true，包括空数组和空对象。
-
在Chart.js中重复创建图表时，若未正确销毁旧实例，会导致多个图表叠加渲染于同一canvas上，引发tooltip闪烁、性能下降甚至交互异常；根本解决方法是确保每个图表拥有独立引用，并在重建前显式调用destroy()。
-
flex-wrap:wrap未生效的主因是父容器无宽度限制或设了min-width:100%，导致Flex容器误判主轴空间充足；需检查width/max-width、避免子项固定宽、慎用white-space:nowrap，并注意gap在旧版Safari中的兼容性问题。
-
应按基础色、语义色、状态色三层抽象定义CSS颜色变量，收敛设计稿色值后写入:root，组件引用语义变量实现设计与开发一致，并通过媒体查询或主题类支持深色模式。
-
CSS选择器优先级是由specificity权重系统决定的，而非声明顺序；其计分规则为ID（100）、类/属性/伪类（10）、标签/伪元素（1）三部分构成，!important不参与计算但会强制覆盖。
-
页面加载完成即触发过滤器逻辑，需确保DOM就绪后再操作节点，推荐将JS置于</body>前或监听DOMContentLoaded事件，避免使用window.onload；过滤函数定义须晚于依赖数据声明、早于调用点；应防止重复执行，通过data属性标记并清空旧内容；性能优化需拆分逻辑、批量更新DOM，必要时采用虚拟滚动。
-
正确使用transition统一控制border-color和box-shadow的过渡，确保持续时间、缓动函数一致，避免因时机或幅度不协调导致的不自然感。
-
直接对width和height做transition可行，但需始终满足width===height且border-radius:50%同时参与过渡，避免transform缩放、媒体查询触发失效及overflow裁剪问题。
-
用<a>标签生成语义化、带UTM参数的分享链接即可实现可点击、可复制、可分享；“复制短链”需预置短地址并用execCommand('copy')配合隐藏<textarea>实现；短链生成必须由后端完成，前端仅负责展示与触发；OpenGraph标签须置于页面<head>中以确保社交平台正确解析。
-
使用浏览器开发者工具和PerformanceAPI定位执行超50毫秒的JavaScript长任务：1.用ChromeDevToolsPerformance面板录制并分析火焰图中Main线程上的长任务；2.通过PerformanceObserver监听longtask条目实现生产环境监控；3.结合主线程活动、FPS及CPU指标判断影响；4.采用代码分割、WebWorker或setTimeout分片优化。
-
transform:scale()是transform属性的函数值，必须写为transform:scale(1.2)，漏前缀、错位置或用于inline元素均无效；缩放中心需用transform-origin调整；放大后文字模糊、溢出、点击失效等问题需配合will-change、pointer-events等修复。
-
Less编译时应通过外部传参动态注入版本号，如lessc的--modify-var或Webpackless-loader的modifyVars，避免硬编码；需确保变量参与输出、注释不被压缩工具删除，且来源为Git标签或CI环境变量。
