-
JavaScriptDecorator是处于Stage3提案阶段的语法糖，需Babel或TypeScript转译，本质是修饰类、方法等的函数，接收固定参数并返回修改后的描述符或构造函数，执行于类定义阶段而非运行时。
-
使用position:fixed将按钮固定在页面右下角，通过bottom和right设置间距，配合z-index避免遮挡，可添加悬停效果提升交互体验。
-
需按显卡型号匹配工具并验证GPU加速：先确认显卡与驱动，再依NVIDIA、AMD、Intel核显、AppleSilicon分别启用对应浏览器标志、系统设置及VSCode扩展。
-
CSS变量需以--开头、大小写敏感，定义在:root可全局复用；支持深色模式通过@media或class重写；var()支持字面量回退值但不支持嵌套var()；IE不支持需fallback或构建时处理。
-
使用Flexbox布局可实现底部固定页脚，通过设置容器min-height:100vh和display:flex，主内容区flex:1自动撑开，页脚自然置于底部，兼容性好且简洁高效。
-
用console.groupCollapsed按组件名+状态精准分组初始化日志，统一在生命周期入口包裹，配合console.table、条件日志和%c彩色标记，提升可读性与排查效率。
-
在tailwind.config.js的theme.spacing下直接添加键值对即可扩展自定义spacing，如'1.5':'0.375rem'，支持mt-1.5等工具类；需用字符串键名（带引号）、合法长度单位值，修改后重启devserver。
-
navigator.maxTouchPoints不可靠，无法准确识别触控能力；应通过事件监听（如touchstart、pointerdown）动态检测真实输入方式并实时调整UI。
-
Generator函数凭借暂停与恢复执行的特性，在异步流控制中仍具优势：1.通过yield实现可中断流程，支持动态决策；2.结合Promise可构建灵活的异步调度器，实现按需加载与任务队列；3.天然集成迭代器协议，便于构建惰性求值的数据流管道；4.适合实现协程与状态机，如表单提交、游戏事件等状态驱动场景。尽管async/await更普及，Generator在需精细控制异步流程时依然不可替代。
-
div标签在HTML中有12种经典用法：1.基础布局容器，2.响应式设计，3.网格布局，4.弹性盒子布局，5.模态框，6.导航菜单，7.轮播图，8.表单布局，9.卡片式布局，10.标签页，11.悬浮提示，12.动画效果，这些用法结合CSS可以实现多种效果，但需注意性能和用户体验。
-
aspect-ratio在SCSS中与纯CSS无本质区别，仅是编译为原生CSS；需配合width或媒体查询实现响应式，避免变量插值格式错误（如浮点数）、空格缺失及父容器尺寸未定义导致失效。
-
频繁更新ShadowDOM会显著降低性能，因其每次操作都触发样式计算、布局和绘制；应避免在attributeChangedCallback等钩子中直接重写shadowRoot.innerHTML，而采用差异更新、DocumentFragment批量挂载、shouldUpdate拦截、requestUpdate合并及CSS变量动态主题等策略优化。
-
视频网站首页需解决三大技术难题：背景视频防跳动（fixed+object-fit+autoplay+muted+playsinline）、多列卡片错位（flex布局+aspect-ratio+flex-shrink:0）、多区域同步播放（单video+canvas逐帧绘制+显式设置canvas尺寸）。
-
BEM规范强制块名使用中划线：user-profile✅，userProfile❌（CSS非法），user_profile❌（混淆修饰符）；元素名必须基于完整块名+双下划线，如user-profile__avatar✅；工具链依赖中划线正则校验，确保语义唯一与工程化稳定。
-
不能用float实现现代多列布局，它与grid是替代而非互补关系；float会使grid子项脱离轨道、导致塌陷重叠，且clear无效，CSS规范已明确float在Flex/Grid子项上无效果。
