-
用text-decoration:none显式覆盖a元素及其伪类（:link、:visited、:hover、:active、:focus），按LVHA顺序声明，避免父容器设置或遗漏状态导致下划线残留。
-
JavaScript的try...catch仅捕获同步执行异常，不处理异步错误、语法错误、资源加载失败及Promise拒绝；需在调用处包裹且await异步操作，catch参数应命名避免覆盖Error，finally中避免return或throw。
-
<p>必须用时间戳计算天数差再分组：Math.floor((Date.now()-notifyTime)/86400000)得整数天差，按0/1/≥2分为today/yesterday/older；统一后端返回ISO或毫秒时间戳，渲染时先分组再遍历keys避免标题重复。</p>
-
用语义化<ol>或<ul>搭建时间线结构，<li>包裹含<time>、<h3>、<p>的卡片，伪元素::before绘制连线与圆点，统一用margin-block-start控制间距，确保可访问性与响应式。
-
linear-gradient只能作为background-image的值，不能用于background-color；必须用to方向或标准角度（注意0deg指向上），单位不可省略，旧浏览器需-webkit前缀。
-
mix-blend-mode是元素内容与下方堆叠上下文（如父背景、兄弟元素、video等）的混合，生效关键在于结构：需同级定位+下方有可混合内容，且避免isolation、opacity、filter等隐式创建层叠上下文的属性。
-
col标签仅支持width、background-color、border（左右）等有限样式，text-align在Chrome中有效但其他浏览器可能忽略，color等属性完全无效；必须严格按列数顺序匹配且置于caption后thead前，否则样式失效。
-
for循环遍历数组最高效，现代引擎深度优化后比forEach、for...of快20%–50%，需缓存length并避免函数调用开销；超大数组应分片或用requestIdleCallback防阻塞。
-
省市区三级联动必须用JavaScript实现，不能仅靠HTML嵌套select；需用data-level和data-parent标记层级依赖，否则无法动态清空、加载与过滤。
-
spread-radius设为正值时阴影向外等比例扩张，是几何尺寸的真实增大而非错觉；例如box-shadow:008px4pxrgba(0,0,0,0.1)中阴影宽高各增加8px，造成“胀出感”，需配合blur-radius和低透明度color协同控制以实现自然光影效果。
-
place-items:center没反应最常见原因是父容器未设display:grid；它仅对grid/inline-grid容器有效，且要求子元素为直接子项、未被align-self/justify-self覆盖，也不适用于absolute脱离文档流的元素。
-
WeakMap是实现业务组件状态“硬隔离”托管的最可靠原生方案，其键必须为对象、不可遍历、无size/clear方法，且键失联后自动GC回收，确保状态与实例在语言机制层面强绑定。
-
gap在多列布局中不管用，仅对grid和flex有效；多列布局需用column-gap替代，且其与gap同名不同源，属multi-column模块。
-
Webpack5中use数组从右向左执行，必须写为['style-loader','css-loader']：css-loader先解析@import、url()等语法并转成JS模块，style-loader再将其注入<head>；若顺序颠倒，style-loader将收到未解析的原始CSS字符串，因缺少toString()方法或模块依赖而报错。
-
多重box-shadow拖尾粒子通过同一元素多层偏移、透明度递减、模糊渐变实现，需统一偏移方向、控制模糊值防糊化，禁用drop-shadow因不支持多层独立配置，动画应预设状态并启用GPU加速。
