-
appearance:none单独使用基本无效，必须配合-webkit-appearance:none、-moz-appearance:none三前缀声明，立即设置width/height防塌缩，并用position:absolute+clip隐藏原生控件以保障可访问性与点击区域。
-
@layer优先级由源码中声明顺序决定，第三方样式未包装则落入隐式顶层并高于所有显式层；必须用@importurl()layer()显式导入框架到指定层，且@layer声明须在顶层、不可嵌套。
-
轮播图的指示器和左右箭头必须共用同一BEM块名carousel，分别命名为carousel__indicator和carousel__control，后者用--prev/--next修饰符区分方向，禁用状态统一用--disabled修饰符，确保样式隔离、状态同步与事件委托一致。
-
最稳妥的做法是用rgba()或hsla()设置background-color实现背景半透明，避免使用opacity（会导致整个元素及子元素变透明）；现代浏览器均支持，可结合CSS自定义属性动态控制。
-
WebSocket需手动实现重连机制，关键包括：onclose须在readyState=0时用addEventListener绑定；采用指数退避（起始1s、倍率1.6、上限30s）并设最大重试次数；结合心跳（25sping/15spong超时）与连接标识防消息混乱；所有send前校验readyState===OPEN且匹配_ws._id。
-
main标签用于定义页面核心内容，提升语义化与可访问性，一个页面仅能使用一次，不可嵌套在header、footer等元素内，应排除导航、页脚等公共部分。
-
scroll-padding在固定导航栏下跳转遮挡标题，因其默认作用于根容器且不自动补偿导航栏高度；需在滚动容器设scroll-padding-top（如calc(64px+env(safe-area-inset-top))），动态高度需JS更新；可与scroll-snap-type共用但需注意Safari优先级问题；Safari15.4+存calc+env首次失效bug，Firefox不支持逻辑属性缩写。
-
:first-child选中父元素下第一个子元素，:last-child选中最后一个子元素，二者均要求该元素满足选择器条件且位于对应位置，如p:first-child仅当p为首个子元素时生效，p:last-child同理，关键区别在于目标子元素的位置不同。
-
grid-row跨行必须指定起始和结束行线，如2/4占第2、3行；支持命名线如a/c，span需配合起点如3/span2；单独span2由浏览器自动分配起点但不可控。
-
直接用eval或Function不安全，因其共享全局作用域、可读取window.location、返回真实window，并可能通过原型链污染影响宿主；Proxy沙箱通过代理空壳对象、拦截属性访问、重写高危方法及禁用with等手段实现真正隔离。
-
应使用history.pushState()接管导航并同步更新URL与视图状态，配合popstate监听及服务端historyApiFallback配置，确保标签页切换不刷新、状态不丢失且直链可用。
-
HTML5表单需正确使用语义化属性才能提升可访问性：必须显式关联label与控件，fieldset+legend用于选项组，aria-invalid和aria-describedby须动态更新，type属性须真实匹配内容，自定义下拉须手动实现完整ARIA支持。
-
用performance.mark+performance.measure是建立可复现、可比对、可嵌入自动化流程的业务性能基准最轻量且标准的方式；它写入标准PerformanceEntry，被所有现代调试工具原生支持，而console.time缺乏跨上下文稳定性、不可导出、无法与原生事件对齐。
-
帮助中心首页需用「分类导航+关键词入口」双结构，顶部固定搜索框，用<details><summary>折叠分类，标题设id锚点，CSS加scroll-margin-top避免遮挡。
-
本文介绍如何在用户选择某个数值后，自动移除超出剩余可用配额的<option>元素，实现“选N个，则后续仅剩(max−N)个可选”的逻辑，适用于资源预约、库存分配等场景。
