-
应按基础色、语义色、状态色三层抽象定义CSS颜色变量，收敛设计稿色值后写入:root，组件引用语义变量实现设计与开发一致，并通过媒体查询或主题类支持深色模式。
-
CSS选择器优先级是由specificity权重系统决定的，而非声明顺序；其计分规则为ID（100）、类/属性/伪类（10）、标签/伪元素（1）三部分构成，!important不参与计算但会强制覆盖。
-
应使用div+CSS（Flex/Grid）替代table布局，规范导航栏、图库、国旗SVG、表单本地存储及中文字体fallback。
-
Tailwind的dark变体默认不生效，因它仅是条件前缀，需手动在<html>添加dark类或配置darkMode:'class'；须用JavaScript控制类切换并持久化至localStorage，且注意focus:ring等样式在深色下的可见性。
-
直接在HTML元素的style属性中用color设置文字颜色即可，推荐使用6位十六进制（如#333）、rgb()或CSS变量（需提前定义），注意拼写、分号及对比度合规性。
-
link元素的onload/onerror事件在Chrome93+/Firefox65+支持但Safari（iOS17/macOS14）仍不触发；需优先监听原生事件，失败时降级轮询document.styleSheets并安全检查cssRules。
-
XMLHttpRequest.upload.onprogress不触发的根本原因是监听对象错误，必须绑定到xhr.upload而非xhr本身，且需在open()后、send()前设置；若后端未返回Content-Length或被代理截断，e.lengthComputable将为false，导致无法计算进度。
-
<p>data-*属性必须用小写连字符命名，如data-user-id；JS通过dataset访问时连字符转驼峰，但修改需用setAttribute；不可存敏感信息或大量数据；框架中需显式透传，且不具响应性。</p>
-
text-overflow:ellipsis必须同时满足四个条件才生效：块级或可设宽高元素、显式设置width/max-width、white-space:nowrap、overflow:hidden；缺一不可。
-
页面加载完成即触发过滤器逻辑，需确保DOM就绪后再操作节点，推荐将JS置于</body>前或监听DOMContentLoaded事件，避免使用window.onload；过滤函数定义须晚于依赖数据声明、早于调用点；应防止重复执行，通过data属性标记并清空旧内容；性能优化需拆分逻辑、批量更新DOM，必要时采用虚拟滚动。
-
scroll-snap-type不生效最常见的原因是父容器未形成可滚动上下文：既无内容溢出，也未显式设置overflow（如overflow-y:auto）和确定的视口尺寸（如height:100vh），仅靠min-height或内容撑开无效；同时需确保scroll-snap-align与滚动方向、子元素盒模型及scroll-padding等严格匹配，否则吸附失败。
-
OffscreenCanvas可在WebWorker中直接绘图，实现后台生成海报：主线程transferControlToOffscreen→Worker绘制并transferToImageBitmap→主线程drawImage渲染；需注意字体加载、图片预传及浏览器兼容性。
-
align-items:stretch默认生效但需满足前提：容器交叉轴尺寸明确、子项未设固定高度或覆盖对齐方式、flex-direction为row时才实现列等高，IE11存在兼容性缺陷。
-
纯CSS可实现阶梯式逐项入场动画，需用@keyframes+animation而非transition；SCSS的@for简化延迟计算，但动态列表需JS或CSS变量配合；起始状态须设transform:translateY(20px)opacity:0并配合overflow:hidden确保阶梯感。
-
字体不显示主因是@font-face声明错误或字体路径、格式、权限问题；应检查路径准确性（推荐绝对路径）、多格式兼容性（woff2优先）、语法完整性、跨域及MIME类型配置。
