-
::part()未生效是因为它只匹配组件内显式标注part属性的元素，且不支持链式选择、大小写敏感、不能在shadow内自用；必须由组件作者主动暴露part，且需注意浏览器兼容性与closedshadowroot的限制。
-
使用animation结合@keyframes可实现背景色渐变动画，如在蓝、红、绿间循环；通过linear-gradient与background-position变化可创建流动渐变效果；简单交互则推荐transition实现平滑过渡。
-
纯CSS浮动无法实现真正响应式等高列，所有“等高”均为视觉欺骗；overflow:hidden仅防塌陷，不解决高度差异；伪等高在响应式下易失效；现代项目应优先使用flex或grid。
-
flex-direction:row-reverse仅反转视觉渲染顺序，不改变DOM结构、语义顺序及可访问性；屏幕阅读器、Tab导航、SEO仍按原始HTML顺序处理。
-
通过构建工具压缩CSS并启用Gzip减少文件体积；2.内联关键CSS、拆分非关键样式以优化加载时机；3.利用media查询和preload按需加载；4.避免@import和深层嵌套以提升解析效率。
-
CSSGrid无法真正实现瀑布流，grid-auto-flow:dense仅回填固定高度空隙，不支持动态列高；真瀑布流需JS计算列高或使用grid-template-rows:masonry（Chrome116+实验性支持），但Safari/Firefox仍不兼容。
-
Chrome/Firefox/Safari中::placeholder不生效的典型原因是浏览器版本差异导致前缀支持不一：Safari15.4+才稳定支持标准::placeholder，Firefox51+才切换至标准语法但仍需兼容旧版，Chrome/Edge支持::placeholder及::-webkit-input-placeholder；必须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-inpu
-
要精确获取年、月、日、时、分、秒等时间组成部分，1.使用newDate()创建时间对象；2.通过getFullYear()获取年份；3.用getMonth()+1获取真实月份（注意0-11）；4.getDate()获取日期；5.getHours()获取小时；6.getMinutes()获取分钟；7.getSeconds()获取秒数；为确保格式统一，可用padStart(2,'0')补零，最终拼接成如YYYY-MM-DDHH:mm:ss的格式。
-
text-shadow语法为水平偏移、垂直偏移、模糊半径、颜色，顺序不可错；常用于复杂背景提可读性；失效多因overflow裁剪、颜色相近或逗号遗漏；推荐双层阴影组合提升质感。
-
应使用defer属性加载业务JS、async加载统计脚本，禁用document.write；首屏CSS内联且控制在2–3KB，非关键CSS用media="print"延迟加载；图片首屏用eager、非首屏用lazy；启用Gzip/Brotli压缩。
-
JavaScript需要弱引用以避免内存泄漏，主要通过WeakMap和WeakSet实现；其键或元素为对象时，不阻止垃圾回收，适用于为对象关联元数据、缓存、标记等场景，但无法遍历、不能用原始值作键、值为强引用且回收时机不确定，故仅解决特定内存泄漏问题，非万能工具。
-
容器查询配合轻量状态机是当前最干净的微观自适应方案，需前置设置container-type、viewportmeta及使用@container语法，再通过ResizeObserver驱动状态机切换CSS类名实现精准响应。
-
优先用gap替代border实现等距网格，移除item边框改用outline或background+padding模拟；必须用border时，统一box-sizing:border-box并配合精确calc计算flex-basis。
-
应按用途语义化封装@mixin，如flex-row-center，而非通用参数化写法；需避免参数顺序错误、默认值干扰、意图不明确等问题，子项mixin须带-item-后缀，注意IE兼容与编译体积。
-
index.html无法直接连接数据库，必须通过后端服务中转；前端用fetch调用API，后端连接数据库并返回JSON；切勿硬编码数据库凭证，需处理CORS和安全防护。
