-
Intl.Segmenter是基于语言习惯的语义分段API，需按locale和granularity精确配置以支持中文词、日文助词、泰语无空格等场景，并结合偏移量构建索引，混合文本应分区处理，兼容性不足时降级为空格/标点分割。
-
<img>不加alt会导致浏览器渲染失败、屏幕阅读器无法播报、SEO权重下降；alt是语义必需项，纯装饰图应设为alt=""，链接中的图片需说明目标。
-
返回顶部功能需用window.scrollTo({top:0,behavior:'smooth'})，确保顶部有id="top"元素、链接href为#top、JS中调用event.preventDefault()；按钮显隐应requestAnimationFrame节流并用display控制，避免iOS兼容问题。
-
Symbol是JavaScript中用于创建唯一不可变标识符的基本类型，核心用途是避免属性名冲突、实现软私有属性、支持全局共享（Symbol.for）及自定义对象行为（如Symbol.iterator）。
-
构建时注入环境变量控制CSS行为，Vite通过define传入Sass变量并用@if条件编译，Webpack配合DefinePlugin与sass-resources-loader实现；CDN路径须由JS动态加载或CSS变量管理，禁用运行时JS切换以防FOUC和SSR不一致。
-
position:sticky在移动端失效主因是父容器设置overflow:hidden/auto/scroll而切断锚定链；媒体查询中改position类型会导致布局跳动；z-index受层叠上下文限制；兼容性差时应优先用IntersectionObserver模拟。
-
直接用@each遍历map生成边距类更安全语义化；@for仅提供数字索引，无法映射语义名、易致单位拼接错误、难扩展负边距与响应式，且后续调整需重写逻辑。
-
使用transform和@keyframes实现滑动面板动画，通过translateX控制位移，结合ease缓动和forwards保持状态，优先用transform提升性能，避免重排，并可通过JavaScript控制类名切换动画。
-
动态切换多主题样式需通过JavaScript精准替换id="theme-css"的link标签href属性，预加载CSS避免闪动，监听onload/onerror处理加载状态，并用localStorage保存用户偏好实现自动应用。
-
Grid容器遵循标准盒模型，但子项尺寸由网格轨道和对齐属性共同决定，而非自身width/height；fr单位分配剩余空间，子项stretch时width被忽略，需用align-self:start等显式控制。
-
应轮询检测window.devicePixelRatio变化：用requestAnimationFrame实现精准、低开销的实时监听，并首次加载时立即执行；resize事件不可靠，因缩放不必然改变窗口尺寸。
-
dash.js需配合正确HTML与配置才能实现DASH自适应播放：MPD须HTTPS提供且响应头含application/dash+xml，移动端需video标签添加muted、playsinline及viewport限制，容器须用aspect-ratio或padding-bottom维持宽高比，video设object-fit:cover防拉伸。
-
使用is-active类结合CSS与JS逻辑实现导航高亮，通过为当前页菜单项添加.is-active并自定义样式如文字变色加粗，再用脚本自动匹配URL路径高亮对应链接，适用于各类Foundation导航结构。
-
应将--btn-group-gap变量设在按钮组容器上，因其需被gap属性读取且依赖继承；设在:root易受污染，设在button上无效；gap仅对flex/grid容器生效，须配合display使用，并分层提供marginfallback。
-
Tailwind的boxShadow配置只接受对象映射而非数组，因JIT引擎仅识别key-value结构，每个value必须是含逗号分隔的合法box-shadow字符串；传入数组会导致静默忽略或构建失败。
