-
BEM结构应分层:.select为容器,.select__trigger为点击区,.select__list为面板,.select__option为选项;选中态用.select__option--selected,组件激活态用.select--open或.select--focused。
-
不是必须,但强烈建议用<thead>包裹表头;它提升语义化、可访问性及打印/滚动时表头重复显示能力,WCAG和主流UI库均要求该结构。
-
margin-left:auto靠右生效的前提是元素处于干净的flex上下文:父容器需为display:flex且未被justify-content等覆盖,目标元素须为直系子项、无DOM干扰节点,并在flex-direction:row下使用。
-
mailto链接点开没反应,主因是参数含未编码的中文、空格、换行或符号导致浏览器截断;收件人含空格或全角字符也会失败;部分环境(如iOSPWA、企业Android平板)未注册默认邮件客户端而静默丢弃。
-
WCAG2.1要求普通文本对比度≥4.5:1,需用工具验证而非目测;避免opacity降背景色,深色模式与prefers-contrast需同步调整背景与文字色,hsl()变量可联动控对比度。
-
Props本身不支持防抖,因其是被动接收的数据通道;真正需防抖的是子组件中基于props变化触发的副作用逻辑,如请求、计算或DOM更新,应通过watch+防抖函数或上移至父组件实现。
-
document.execCommand已废弃,Chrome93+等主流浏览器默认禁用,调用返回false且无提示;根本原因是标准移除,非配置问题,迁移应改用Selection+RangeAPI或现代编辑器如tiptap。
-
contain:layout能隔离子元素布局变化对父容器的影响,避免父级重排;但禁用height:auto等依赖内容的尺寸计算,且不适用于flex/grid容器。
-
Terser是现代JavaScript压缩的默认选择,UglifyJS因不支持可选链、空值合并等新语法且压缩率低而被淘汰;Webpackv5+已内置Terser,无需安装uglifyjs-webpack-plugin,应通过terserOptions自定义配置。
-
必须用语义化标签(如<nav><main><aside>)而非div,因其承载区域意图、支撑无障碍与SEO;布局宜用显式grid而非grid-template-areas防命名冲突;卡片内元素用flex对齐;编辑态应复用节点而非替换DOM。
-
justify-self用于Grid布局中控制子元素在行内轴(横轴)的对齐,如center、start等;align-self在Grid和Flexbox中均有效,控制块轴(纵轴)对齐,如center、flex-start。前者仅适用于Grid,后者通用,优先级高于父容器设置。
-
for循环用于已知次数的重复执行,语法为for(初始化;条件;更新){循环体},如for(leti=1;i<=5;i++)console.log(i)可打印1到5。
-
用computed实现列表搜索过滤的核心是将原始数据和搜索关键词作为响应式依赖,Vue自动追踪变化并重新计算结果;搜索关键词需用ref或data声明为响应式,computed中通过filter返回新数组,建议统一转小写比对,多字段搜索用||连接,防抖须在事件中处理而非computed内。
-
LongTasksAPI仅记录≥50ms的主线程任务,不能直接检测用户感知的卡顿;需结合≥1s耗时、帧率丢失或输入延迟等指标综合判断,且存在Safari不支持、attribution为空、漏报连续短任务等局限。
-
直接给.login-box容器设background-image最稳妥,需同时设置background-size:cover、background-position:center、background-repeat:no-repeat,并加background-color降级;配遮罩层::before提升文字可读性,用min-height:100vh保障响应式高度,高DPR屏需提供@2x图。