通过:root定义全局颜色变量可集中管理样式，如--primary-color:#007bff；利用var()函数调用变量，实现主题统一与动态切换，提升维护效率和团队协作一致性。

通过移除<p>元素默认下边距并统一控制<ul>行高，可有效压缩嵌套段落的<li>项垂直间距，避免过大的空白区域。

slot标签是WebComponents中用于内容分发的核心机制，它通过投影而非移动的方式将LightDOM内容分发到ShadowDOM指定位置。1.它不是把内容移入ShadowDOM，而是保留于LightDOM并通过slot作为分发点；2.默认插槽无name属性，捕获未匹配内容，且一个组件只能有一个；3.具名插槽通过name属性与外部内容的slot属性匹配实现精准分发；4.内容样式保留在LightDOM上下文中，默认不受ShadowDOM影响，但可通过::slotted()或CSS变量控制；5.事件冒泡

会，但仅在特定条件下明显；现代浏览器已优化常见选择器，真正影响性能的是深度嵌套、通配符滥用、动态重排及触发非必要重绘的写法。

JavaScriptBigInt是一种内置原始类型，用于表示任意精度整数，突破Number的安全整数限制（2⁵³−1）；通过字面量（如123n）或BigInt()函数创建，支持基本算术运算但不与Number混用，适用于大ID、密码学等高精度场景。

HTML5页面无法打开需按五步排查：一查浏览器兼容性，二验文件加载方式，三检HTML语法结构，四查JS及资源加载，五禁用扩展与安全策略干扰。

在Vue3中使用vue-i18n时，若初始化配置中设置legacy:false（CompositionAPI模式），则无法通过this.$i18n.locale='xx'动态修改语言；必须启用legacy:true并配合OptionsAPI才能兼容该写法。

在ChromeDevTools中快速定位覆盖某元素的CSS规则，需右键元素选“RevealinStyles”，查看带删除线的声明；优先级由内联样式>ID>类/属性/伪类>标签/伪元素决定，可用getComputedStyle验证最终值。

D3.js是数据驱动的SVG可视化库，需手动绑定数据与DOM元素，适合深度定制；通过select、data、enter、attr等方法构建图表，配合scale、axis、transition实现映射、坐标轴和动画。

运行HTML文件只需用浏览器打开，无需“瑞香t”等工具；可通过双击、右键选择浏览器、拖拽到浏览器或使用VSCode的LiveServer插件实时预览，配合编辑器与开发者工具提升开发效率。

推荐用@layerutilities自定义语义化工具类，如.card、.btn-primary，结合插件机制生成动态样式，保留原生类做响应式微调，兼顾可读性与灵活性。

浏览器中除console.log外，还可使用console.debug/info/warn/error分级日志、console.group/time组织上下文、console.table展示表格、console.dir查看嵌套对象、console.trace追踪调用栈，并可通过封装函数添加时间戳和模块前缀，生产环境通过域名判断动态禁用非error日志。

z-index仅对定位元素生效，未定位或陷入父级层叠上下文会导致失效；需先设position（如relative），再设z-index；避免滥用超大值，推荐按功能分层设定合理范围。

事件委托是利用事件冒泡机制在父元素统一监听子元素事件，避免为每个子元素重复绑定，提升性能并支持动态元素；应优先用closest()精准匹配目标，避免绑定到document/body，且focus/blur等不冒泡事件需特殊处理。

尾调用优化（TCO）是ES6引入的一项机制，旨在解决传统递归导致的栈溢出和性能瓶颈问题。1.TCO通过复用当前栈帧而非创建新栈帧，使递归函数在执行时不再受限于调用栈大小，从而避免栈溢出错误；2.它减少了内存消耗，提升递归执行效率，尤其适用于深度递归场景；3.尾调用优化要求函数最后一步直接返回另一个函数调用的结果，不能夹杂其他操作，常见实现方式是使用累加器保存中间结果；4.目前主流JavaScript引擎如V8尚未广泛支持TCO，因此尾递归无法完全替代循环，尤其在兼容性和简单迭代场景中，循环仍是更优选择。