-
BEM选择器不应嵌套过深，须保持元素语义独立；修饰符专注静态外观，伪类统一处理；JS操作应解耦控制类名；响应式逻辑交由媒体查询或容器查询，而非混入BEM命名。
-
双色调纯CSS实现核心是mix-blend-mode混合而非调色，需用伪元素叠加单色层并设multiply/screen模式，background-blend-mode适用于背景图，兼容性需降级为filter微调，真机调试须注意系统色彩管理干扰。
-
设计自定义语法如def替代function；2.使用Babel插件或预处理将def转换为标准函数；3.手动实现词法、语法分析生成AST并转换为目标代码。
-
推荐使用grid-gap管理网格内部间距，结合margin处理外部留白或特殊元素距离。gap避免重复空白与外边距塌陷，支持响应式布局；margin用于容器外边距、个别项隔离及对齐非网格元素。统一内部用gap、外部用margin可避免间距叠加，通过重置子元素margin并合理设置容器margin实现清晰布局。特定场景下可用负margin或单独class调整首尾项视觉效果，确保代码易维护。
-
clientX相对于视口左上角，不随滚动变化，适用于悬浮提示、菜单定位；pageX相对于文档左上角，随滚动变化，适用于绘图、锚点记录；需注意IE8兼容性及screenX等坐标差异。
-
ES2015起对象属性遍历顺序标准化：先按数值升序排列整数字符串键（0至2³²−2），再按插入顺序排列其余字符串键和Symbol键；V8、SpiderMonkey、JavaScriptCore当前基本一致，但旧版本或边界值（如"2147483648"）仍有差异。
-
用SassMixin定义关键帧动画需封装@keyframes命名与行为，通过@content注入动态帧（支持from/to或多段百分比），配合参数控制时长、缓动等，兼顾语义性、复用性与可维护性。
-
外边距塌陷是CSS规范定义的垂直相邻块级元素margin合并行为，发生在父子或兄弟块间；行内、浮动、绝对定位元素不参与；可用BFC（如display:flow-root）或border/padding/flex等轻量方式解决。
-
使用<nav>标签构建语义化导航，结合CSS美化与JavaScript实现响应式交互，并通过ARIA属性和描述性链接文本提升可访问性与SEO。
-
CanvasAPI不提供开箱即用的绘图交互，需手动管理鼠标状态、路径绘制与撤销逻辑；关键在连点成线、正确使用beginPath()/moveTo()/lineTo()，撤销需保存操作指令或双canvas缓存，导出图片须注意跨域、像素尺寸与格式参数。
-
Chrome中font-smoothing无效是因-webkit-font-smoothing仅macOS有效，Windows/Linux下被静默忽略；应优先使用font-optical-sizing:auto等标准属性，而非依赖私有平滑控制。
-
需通过系统化手段解析HTML结构：一、用开发者工具查看DOM树；二、识别语义化标签与容器边界；三、借助CSS选择器反向推导层级；四、运行JS脚本遍历输出层级；五、利用第三方工具生成可视化结构图。
-
for循环比forEach和map快，因其是原生语句、无函数调用开销、可缓存长度、支持break/continue；而forEach/map有回调开销、闭包、上下文绑定及新数组分配等成本。
-
用padding-left做嵌套缩进而非margin-left，因其保持父容器事件热区完整、确保hover/click/touch全区域响应；配合CSS变量、clamp()与border-box可控层级、对齐及响应式。
-
用transform:rotate()配合transition和JS控制替代纯CSSanimation，动态计算目标角度、校准扇区中线、强制重绘并状态锁控，可实现精准、不卡顿、防连点的转盘抽奖。
