# 1. PostCSS 插件链（autoprefixer、postcss-preset-env） A autoprefixer 编译新 CSS 语法 B postcss-preset-env 编译新语法并聚合插件，autoprefixer 负责厂商前缀 ✓ 正确答案 C PostCSS 只能加前缀 D browserslist 与插件无关
# 2. Sass/Less 变量的编译期作用域与 CSS 自定义属性运行时继承的差异 A Sass/Less 变量编译期替换，CSS 自定义属性运行时继承，动态主题依赖后者 ✓ 正确答案 B Sass 变量在运行时也可以动态修改 C 自定义属性在编译期被替换 D 两者求值时机相同
# 3. Tailwind v4 的 CSS-first 配置（@theme）与 @apply 演进 A v4 的 @theme 只能在 JS 配置中定义 B v4 用 @theme 在 CSS 中定义令牌并自动生成工具类，@apply 支持变量插值 ✓ 正确答案 C @apply 在 v4 中被移除 D @theme 与 tailwind.config.js 完全等价
# 4. composes 与 CSS Modules 共享样式的循环依赖风险 A composes 不会产生依赖 B 跨文件相互 composes 会形成循环依赖，应分层引用并用 lint 治理 ✓ 正确答案 C 循环依赖不影响构建 D composes 只能同文件使用
# 5. CSS Variable 的运行时覆盖（element.style.setProperty）与 SSR 水合一致性 A 服务端输出初始变量、首帧前同步覆盖偏好，可避免主题闪烁 ✓ 正确答案 B SSR 无法输出 CSS 变量 C 水合后覆盖一定闪烁 D setProperty 与 SSR 无关
# 6. @scope (--name) 局部作用域与原生 Shadow DOM 作用域样式的对比 A @scope 与 Shadow DOM 隔离强度相同 B Shadow DOM 不隔离样式 C @scope 会创建新的 DOM 树 D @scope 基于选择器范围隔离，Shadow DOM 提供树边界隔离，选型看封装需求 ✓ 正确答案
# 7. vanilla-extract 与 Panda CSS 在零运行时 CSS-in-JS 的 SSR 注水一致性与构建产物体积对比 A vanilla-extract 在运行时注入样式 B 两者编译期生成静态 CSS，SSR 类名一致，产物按需生成 ✓ 正确答案 C Panda CSS 必须运行时执行 D 零运行时方案无法 SSR
# 8. UnoCSS 的预设与 shortcuts 与 Tailwind v4 的 @theme 在原子化灵活度与生态兼容性上的取舍 A UnoCSS 不支持预设 B UnoCSS 以预设与 shortcuts 提供高灵活度，Tailwind v4 以 @theme 与成熟生态取胜 ✓ 正确答案 C Tailwind v4 无法定义自定义令牌 D 两者都强制运行时生成
# 9. styled-components 的运行时注入在 React Server Components 与 Server Streaming 场景下的水合风险与替代方案 A styled-components 样式在服务端无需处理 B RSC 下运行时注入无任何风险 C 运行时注入在 RSC 与流式渲染下有收集顺序与水合风险，静态提取是主要替代 ✓ 正确答案 D styled-components 已支持编译期提取
# 10. CSS Modules 局部类名生成（hash 策略）在 SSR 与客户端产物的稳定性冲突如何解决 A hash 类名与构建配置无关 B SSR 与客户端需共用构建配置与确定性 hash，必要时共享映射表 ✓ 正确答案 C hash 不稳定是正常现象 D CSS Modules 无法用于 SSR
# 11. Tailwind CSS v4（Oxide 引擎、Lightning CSS、@theme 与 CSS 变量设计令牌） A Oxide 引擎（Rust）提升构建速度，内置 Lightning CSS 编译压缩，@theme 生成变量与工具类 ✓ 正确答案 B Oxide 引擎用 JS 实现扫描 C v4 完全移除了 CSS 变量 D @theme 只能定义颜色
# 12. CSS Animation Worklet 与 Animation.commitStyles 的工程边界（含动画后状态保留） A commitStyles 会删除动画 B commitStyles 将当前动画样式提交为内联样式以保留终态 ✓ 正确答案 C Animation Worklet 已全平台支持 D fill: forwards 无法保留终态
# 13. animation-composition: accumulate | replace | add 在动画合成时的可中断控制 A add 叠加动画值、accumulate 数值累加、replace 替换底层值，配合实现平滑打断 ✓ 正确答案 B replace 会把动画值累加到底层 C animation-composition 只影响颜色 D 动画合成与中断控制无关
# 14. will-change 的使用时机与图层爆炸风险 A will-change 应尽量多用提升性能 B will-change 提前提升合成层但滥用会造成图层爆炸，应仅在关键动画前使用 ✓ 正确答案 C will-change 不会创建合成层 D will-change 只能用于 transform
# 15. CSS transition 与 @keyframes 动画的合成器属性（transform、opacity）成本 A top/left 动画与 transform 成本相同 B opacity 动画会触发布局 C transform/opacity 走合成器成本低，简单切换用 transition，复杂序列用 @keyframes ✓ 正确答案 D @keyframes 只能定义两个关键帧
# 16. Web Animations API 的 KeyframeEffect.composite/iterationComposite 在多动画叠加的工程价值 A composite 控制迭代间的累加 B composite 控制效果与底层值合成，iterationComposite 控制迭代间累加 ✓ 正确答案 C iterationComposite 只影响颜色 D WAAPI 无法叠加动画
# 17. @scroll-timeline（Scroll-Linked Animations） A @scroll-timeline 与 scroll() 无关 B scroll() 语法已被废弃 C @scroll-timeline 只能用于颜色动画 D @scroll-timeline 声明滚动时间线，scroll() 是等价内联语法，均通过 animation-timeline 绑定 ✓ 正确答案
# 18. CSS Modules 与 @layer 级联层结合在大型项目作用域管理的工程价值 A CSS Modules 提供类名隔离，@layer 编排优先级，结合治理大型项目冲突 ✓ 正确答案 B CSS Modules 与 @layer 功能重复 C @layer 无法管理第三方样式 D CSS Modules 会破坏 @layer
# 19. CSS Modules 的 composes 与 Sass @extend 在复用颗粒度的取舍 A composes 会生成嵌套选择器 B @extend 不会增加特异性 C composes 组合完整类规则到元素，@extend 合并选择器，颗粒度与耦合不同 ✓ 正确答案 D 两者复用机制完全相同
# 20. CSS-in-JS 的运行时（styled-components） A styled-components 在构建期生成 CSS 文件 B styled-components 运行时注入样式，样式组件内聚但存在 SSR 收集与动态开销风险 ✓ 正确答案 C styled-components 无任何性能开销 D styled-components 不支持 props
# 21. Tailwind v4 的 Oxide 引擎与 @theme 在编译产物的体积收益 A v4 会生成全部主题变量 B Oxide 按需扫描生成工具类与令牌变量，Lightning CSS 压缩，产物体积更小 ✓ 正确答案 C @theme 令牌总是全部输出 D v4 产物体积大于 v3
# 22. 原子化 CSS（Tailwind v4 Oxide、UnoCSS、Panda CSS） A 原子化 CSS 会生成全部可能类 B 原子化 CSS 按需生成工具类，三款实现差异在扩展机制与生态 ✓ 正确答案 C 原子化 CSS 无法用于生产 D 原子化 CSS 只能运行时使用
# 23. CSS Modules 局部类名的生成原理与继承样式泄漏风险 A 哈希类名只隔离命名，继承属性与全局选择器仍可能泄漏进组件 ✓ 正确答案 B CSS Modules 隔离所有属性 C CSS Modules 与全局样式无关 D 继承属性不会跨组件边界
# 24. vanilla-extract 在大型设计系统的工程价值 A vanilla-extract 在运行时生成样式 B vanilla-extract 编译期生成类型安全的静态 CSS，tokens 双端共享，SSR 友好 ✓ 正确答案 C vanilla-extract 不支持 TypeScript D vanilla-extract 无法定义主题
# 25. PostCSS Preset Env 与 Lightning CSS 在源目标浏览器语法编译的工程价值 A preset-env 按 browserslist 转译新语法，Lightning CSS 用 Rust 实现更快的转换与压缩 ✓ 正确答案 B Lightning CSS 用 JS 实现 C preset-env 无法处理前缀 D Lightning CSS 不支持 CSS Modules
# 26. Tailwind v4 的 CSS-first 配置（@theme）与 JS 配置文件（tailwind.config.js）在 IDE 跳转与重构体验上的差异 A v4 配置只能写在 JS 中 B 两种配置重构体验相同 C v4 无法定义自定义颜色 D @theme 与样式同源便于 IDE 跳转，JS 配置集中但跨文件 ✓ 正确答案
# 27. CSS-in-JS 静态提取（Linaria、vanilla-extract、Pigment CSS） A 三者都在编译期输出静态 CSS，消除运行时开销，差异在 API 与生态 ✓ 正确答案 B 静态提取方案在运行时注入样式 C 静态提取无法用于 SSR D vanilla-extract 是运行时方案
# 28. Open Props 这类 CSS 变量预设库在设计系统尚未建立时如何快速搭建视觉一致性 A Open Props 是运行时库 B 引入 Open Props 后无需自有令牌 C Open Props 无法覆盖动效 D Open Props 提供开箱即用的变量令牌快速建立一致性，应作为过渡逐步演进为自有设计系统 ✓ 正确答案
# 29. CSS @scope (--name) 在隔离第三方样式与组件级样式泄漏的边界与 polyfill 现状 A @scope 能阻止继承属性泄漏 B @scope 强于 Shadow DOM 隔离 C @scope 已无兼容问题 D @scope 是选择器级隔离，不能完全阻止继承与全局覆盖，polyfill 能力有限 ✓ 正确答案
# 30. StyleX（Meta）在大型项目（Facebook/Robinhood） A StyleX 在运行时生成样式 B StyleX 编译期静态分析生成确定性原子化 CSS，支持规则合并，适合超大规模项目 ✓ 正确答案 C StyleX 无法合并样式 D StyleX 只支持颜色
# 31. CSS Modules composes from 跨文件复用与全局工具类（Tailwind）在团队协作的治理规范 A composes from 没有依赖问题 B 工具类不需要任何规范 C Tailwind 无法与 CSS Modules 共存 D composes from 需约束单向依赖，Tailwind 工具类需组件化沉淀与顺序规范 ✓ 正确答案
# 32. Panda CSS 的 recipes 与 slot recipes 在定义可复用组件变体上的工程价值 A recipes 只能定义单一样式 B recipes 提供声明式变体系统，slot recipes 拆分多插槽部件，类型安全且按需生成 ✓ 正确答案 C Panda CSS 是运行时方案 D recipes 无法组合变体
# 33. Tailwind v4 的 @theme 在自定义动画 keyframes 与阴影令牌扩展的工程应用 A @theme 只能定义颜色令牌 B 动画无法在 @theme 中扩展 C @theme 可定义 animate/shadow 等令牌并生成工具类，keyframes 随之声明 ✓ 正确答案 D 阴影令牌不生成工具类
# 34. Lightning CSS 作为 PostCSS 替代品在现代 Vite/Rspack 构建链中的 prefix 与 CSS Modules 合并策略 A Vite/Rspack 可内置 Lightning CSS，browserslist 驱动 prefix，Modules 先哈希再转换压缩 ✓ 正确答案 B Vite 无法使用 Lightning CSS C Lightning CSS 不支持压缩 D CSS Modules 与 Lightning CSS 冲突
# 35. @keyframes 与 Web Animations API 的混合控制与 cancel/finish 生命周期 A cancel 会跳到动画终点 B finish 会触发 cancel 事件 C getAnimations 无法获取 CSS 动画 D cancel 中断动画回到基础值，finish 跳到终点，两者生命周期语义不同 ✓ 正确答案
# 36. @starting-style 与 View Transitions 组合实现入场动画 A @starting-style 定义动画终点样式 B @starting-style 定义首次渲染的起始样式配合 transition 入场，View Transitions 提供 DOM 更新过渡 ✓ 正确答案 C @starting-style 与 View Transitions 无关 D View Transitions 无法用于路由
# 37. transitionend 与 cancel 事件在动画被打断时的状态一致性 A 过渡被取消时触发 cancel 而非 transitionend，状态收尾需结合读取最终值与兜底 ✓ 正确答案 B 过渡被打断时仍触发 transitionend C transitionend 总是可靠触发 D cancel 事件在过渡正常完成时触发
# 38. animationstart/animationend/animationcancel 事件在动画编排的应用 A 用 animationend 编排下一步、animationcancel 处理中断回退，注意循环动画不触发 end ✓ 正确答案 B 循环动画也会触发 animationend C animationcancel 在正常结束时触发 D animationstart 无法区分动画
# 39. CSS 动画的 fill-mode: forwards/backwards/both 与帧外的最终状态保留 A forwards 在延迟期应用首帧 B fill-mode 影响动画执行速度 C forwards 保留结束帧，backwards 延迟期应用首帧，both 两者兼备 ✓ 正确答案 D 动画结束后样式必然保留
# 40. Scroll Snap 与滚动容器控制的协作 A JS scrollTo 完全不受 snap 影响 B scroll-snap-stop 只作用于鼠标 C JS 滚动受 snap 吸附影响，应让滚动目标与 snap 位置一致并监听 scrollend ✓ 正确答案 D snap 与滚动事件无关
# 41. CSS Transition 与 CSS Animation 在触发方式与时间轴控制的工程差异 A transition 支持循环播放 B animation 无法定义延迟 C transition 依赖属性变化触发，animation 主动播放且支持循环与多关键帧 ✓ 正确答案 D transition 可以定义中间关键帧
# 42. prefers-reduced-motion 媒体查询在无障碍动画降级的现代实践 A reduce 表示用户喜欢更多动效 B 动画降级与无障碍无关 C reduce 偏好只影响滚动条 D reduce 偏好下应关闭/简化大位移与自动动画并保留必要反馈 ✓ 正确答案
# 43. Web Animations API（WAAPI）在 JS 动画与 CSS 动画协作的统一控制 A WAAPI 可统一控制 JS 与 CSS 动画的播放状态与时间线 ✓ 正确答案 B getAnimations 只能获取 JS 动画 C CSS 动画无法被 JS 暂停 D element.animate 会覆盖 CSS 动画
# 44. transform 与 top/left 在 GPU 合成层动画的性能取舍 A top/left 动画走合成器 B 合成层不消耗内存 C transform 动画一定触发布局 D transform 由合成器处理不触发布局，top/left 触发重排重绘成本高 ✓ 正确答案
# 45. CSS @keyframes 与 Motion Path（offset-path）在 SVG / CSS 路径动画的可访问性与降级边界 A 路径动画对辅助技术可见 B 路径动画不影响焦点 C offset-path 只支持直线 D 路径动画大位移易引发眩晕且热区与视觉可能错位，需 reduce 降级与静态终态 ✓ 正确答案
# 46. FLIP（First-Last-Invert-Play）技术实现流畅布局过渡的现代实践 A FLIP 用 top/left 做补偿 B View Transitions 无法替代 FLIP C FLIP 适合滚动中持续使用 D FLIP 用 transform 反向补偿再过渡回零，把布局变化伪装为合成动画 ✓ 正确答案
# 47. 过渡缓动函数（cubic-bezier）在材质设计与微交互的工程取舍 A 所有动画应使用同一种缓动 B ease-in 适合元素进入 C 进入用 ease-out、离场用 ease-in，自定义曲线可模拟弹性，应令牌化统一 ✓ 正确答案 D 缓动不影响感知速度
# 48. scroll-behavior: smooth 与 JS 平滑滚动在可访问性的差异 A smooth 滚动对所有用户都更好 B 平滑滚动需响应 prefers-reduced-motion 回退即时跳转，JS 方案可程序化判断偏好 ✓ 正确答案 C scroll-behavior 无法 CSS 设置 D reduce 偏好不影响滚动
# 49. transition-behavior: allow-discrete 让 display/visibility 等离散属性参与过渡的原理（dialog/popover 显隐动画的关键） A display 默认可平滑过渡 B allow-discrete 只作用于 opacity C transition-behavior: allow-discrete 让 display/visibility 等离散属性参与过渡，支持显隐动画 ✓ 正确答案 D 离散属性过渡无需 @starting-style
# 50. @starting-style 与 transition-behavior 组合实现元素插入 DOM 或从 display:none 变为可见时的入场动画 A display:none 切换总是立即完成 B @starting-style 提供起始态，allow-discrete 控制 display 切换时机，组合实现入场与退场动画 ✓ 正确答案 C @starting-style 只用于 hover D 入场动画无需 transition
# 51. popover 属性与 @starting-style/transition-behavior 组合实现原生弹层进出场动画的工程实践 A popover 弹层无法动画 B 动画会破坏 popover 顶层层级 C popover 只能 JS 显隐 D @starting-style 定义弹出起始态，allow-discrete 保证退场动画完整，popover 显隐可控 ✓ 正确答案
# 52. View Transitions API 与 CSS transition/animation 的差异，SPA 路由过渡如何实现？ A View Transitions 只作用于单个属性 B View Transitions 无法用于 SPA C transition 能自动感知 DOM 结构变化 D View Transitions 对旧新快照做页面级过渡，SPA 中用它包裹路由 DOM 更新 ✓ 正确答案
# 53. 滚动驱动动画(scroll-driven animations)的实现与性能注意点？ A 滚动驱动动画只能使用颜色属性 B animation-range 控制缓动曲线 C 滚动动画无性能开销 D 用 animation-timeline/range 绑定滚动进度，应使用合成器属性并控制元素数量 ✓ 正确答案
# 54. CSS Containment（contain: layout）在动画隔离与重排优化的边界 A contain: layout 会固定元素尺寸 B contain: layout 隔离内部布局重排，尺寸变化需 contain: size 配合 ✓ 正确答案 C contain 不影响任何布局行为 D contain: size 不影响尺寸
# 55. 复合层动画与隐式合成在 Safari 与 Chrome 的实现差异 A 所有浏览器合成层策略一致 B 隐式合成不会增加内存 C Chrome 与 Safari 提升合成层的策略不同，隐式合成可能造成图层膨胀，需跨浏览器实测 ✓ 正确答案 D will-change 越多动画越快
# 56. CSS 物理属性（inset-inline）在国际化布局与动画的工程价值 A inset-inline 按书写模式自动映射方向，RTL 适配与动画镜像一次完成 ✓ 正确答案 B 逻辑属性在 RTL 下不变化 C 逻辑属性只影响字体 D translateX 会自动镜像
# 57. 动画帧率（FPS）与节流（requestAnimationFrame）在长任务中的取舍 A rAF 每 100ms 执行一次 B rAF 每帧执行，长任务超帧预算会掉帧，应拆分任务并保持回调轻量 ✓ 正确答案 C 长任务不影响动画帧率 D 降低 FPS 无优化价值
# 58. 交错动画（Stagger Animation）通过 animation-delay 在列表动画的应用 A 递增 animation-delay 形成交错效果，需配合 fill-mode 与 reduce 偏好处理 ✓ 正确答案 B animation-delay 让所有元素同时开始 C 交错动画无需初始状态 D animation-delay 只能取固定值
# 59. CSS 弹性动画与物理引擎（弹簧动画）在交互动效的取舍 A CSS 曲线能模拟所有物理效果 B 轻量回弹用 CSS 曲线，真实物理（拖拽/惯性）用弹簧引擎或物理库 ✓ 正确答案 C 弹簧动画零成本 D 物理动画无法中断
# 60. View Transitions API 同文档与跨文档过渡在 Safari/Firefox 当前支持度下，如何用 @starting-style 与 animation-range 提供 fallback A 跨文档过渡已全平台支持 B @starting-style 无法作为回退 C View Transitions 无需降级 D 同文档过渡支持优于跨文档，不支持时用 @starting-style 与常规动画渐进增强降级 ✓ 正确答案
# 61. CSS 的 contain 属性如何用于性能优化，content-visibility 的收益与坑？ A content-visibility: auto 无任何副作用 B contain 只能优化颜色 C content-visibility: auto 跳过离屏渲染提升首屏，需 contain-intrinsic-size 占位并注意尺寸异常 ✓ 正确答案 D content-visibility 不需要 contain 配合
